/* =====================================================================
 * PixelAlgo · 设计 Tokens
 * 继承自 IncomeResearch "研究台" 美学，扩展为全站可复用变量层。
 * 本文件只声明变量，零业务样式。所有页面共享。
 * 语义色约定见 docs/design-system.md
 * =================================================================== */

:root {
  /* ── 底色 ── */
  --bg:   #080C17;
  --bg-1: #0B1322;
  --bg-2: #06090F;

  /* ── 表面分层（glassmorphism 用）── */
  --s1: rgba(255,255,255,.025);
  --s2: rgba(255,255,255,.045);
  --s3: rgba(255,255,255,.07);

  /* ── 边框 ── */
  --bd:  rgba(255,255,255,.08);
  --bd2: rgba(255,255,255,.16);

  /* ── 文字梯度（标题→正文→次要→占位）── */
  --ink:   #EAF0FB;
  --ink-2: #A8B3CA;
  --ink-3: #727D96;
  --ink-4: #49536A;

  /* ── 主色 / 数据系列 ── */
  --teal:   #5EEAD4;  --teal-d: #2DD4BF;   /* 品牌 / 系列1 / 前向信号 */
  --gold:   #E8B04B;  --gold-d: #D4963A;   /* 强调 / 损失 / 标签 */
  --coral:  #FB7185;                    /* 反向传播 / 梯度 / 误差 */
  --azure:  #7AB7FF;                    /* 辅助系列 */
  --violet: #A78BFA;                    /* 注意力 / 隐变量 / 高级概念 */

  /* ── 语义状态（仅状态反馈，不用于数据可视化）── */
  --good: #34D399;
  --warn: #FBBF24;
  --bad:  #F87171;

  /* ── 阴影 ── */
  --shadow-sm: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 20px -14px rgba(0,0,0,.7);
  --shadow:    0 1px 0 rgba(255,255,255,.05) inset, 0 20px 44px -26px rgba(0,0,0,.85);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 32px 64px -28px rgba(0,0,0,.90);
  --glow-teal: 0 0 0 1px rgba(94,234,212,.35), 0 0 24px -6px rgba(94,234,212,.45);

  /* ── 圆角 ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ── 间距（8px 栅格）── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ── 动效 ── */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: .15s;  --dur-2: .25s;  --dur-3: .4s;  --dur-4: .6s;

  /* ── 字体 ── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── 布局 ── */
  --maxw: 1200px;
  --nav-h: 60px;
  --lesson-toc-w: 240px;

  /* ── 数据可视化调色板（ECharts / Canvas / SVG 共用，按顺序取）── */
  --series-1: var(--teal);
  --series-2: var(--gold);
  --series-3: var(--coral);
  --series-4: var(--azure);
  --series-5: var(--violet);

  /* ── KaTeX 容器 ── */
  --katex-color: var(--ink);
  --katex-muted: var(--ink-3);
}

/* ── 亮色主题（完整覆盖）── */
[data-theme="light"] {
  --bg:   #F4F6FB;
  --bg-1: #FFFFFF;
  --bg-2: #E9EDF5;
  --s1: rgba(0,0,0,.022);
  --s2: rgba(0,0,0,.04);
  --s3: rgba(0,0,0,.065);
  --bd:  rgba(0,0,0,.10);
  --bd2: rgba(0,0,0,.20);
  --ink:   #161B2A;
  --ink-2: #46506A;
  --ink-3: #69748C;
  --ink-4: #99A2B6;
  --shadow-sm: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 16px -12px rgba(20,30,60,.22);
  --shadow:    0 1px 0 rgba(255,255,255,.7) inset, 0 14px 32px -22px rgba(20,30,60,.28);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 48px -24px rgba(20,30,60,.32);
  --glow-teal: 0 0 0 1px rgba(45,212,191,.30), 0 0 24px -6px rgba(45,212,191,.30);
}