/* ============================================================
   深度学习 · 全景基础学习站 — Design Tokens
   视觉关键词：深邃 · 神经网络 · 梯度流动 · 信号 · 克制
   双主题（亮/暗）各自独立取色；文本对比度 ≥ 4.5:1
   ============================================================ */

:root {
  /* 亮色主题 */
  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #eef0f8;
  --text: #1b1f2e;
  --muted: #565d73;
  --border: #d9dcec;
  --border-strong: #c3c8e2;

  --primary: #4a44c6;        /* 神经元紫：主行动色 */
  --primary-strong: #3a34a8;
  --primary-soft: #eceafd;
  --link: #3f3ab8;
  --accent: #0e7c86;         /* 梯度青：辅助强调 */
  --accent-soft: #e0f4f4;

  --danger: #b3372f;
  --success: #1e7a3c;
  --warn: #96690a;

  /* 难度层级 */
  --level-a: #0e6e78;  --level-a-bg: #dff1f2;   /* 入门 */
  --level-b: #443db8;  --level-b-bg: #e8e6fb;   /* 核心 */
  --level-c: #8a5a06;  --level-c-bg: #f7ecd6;   /* 进阶 */
  --level-d: #9c2164;  --level-d-bg: #f9e3ee;   /* 前沿 */

  /* 进度状态 */
  --st-todo: #9aa1b8;
  --st-learning: #d99a1b;
  --st-done: #2e9e57;

  /* 图（map） */
  --edge: rgba(74, 68, 198, 0.28);
  --edge-hot: #4a44c6;
  --node-fill: #ffffff;
  --node-border: #c3c8e2;

  /* 代码与公式 */
  --code-bg: #14172a;
  --code-text: #dfe3f5;
  --formula-bg: #eef0fa;
  --tok-kw: #8f9bff;
  --tok-str: #7fe0c8;
  --tok-num: #ffc470;
  --tok-comment: #7d86a8;

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 形状与动效 */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-1: 0 1px 2px rgba(27, 31, 46, 0.06), 0 6px 20px rgba(74, 68, 198, 0.07);
  --shadow-2: 0 4px 14px rgba(27, 31, 46, 0.10), 0 14px 40px rgba(74, 68, 198, 0.12);
  --speed: 180ms;
  --ease: cubic-bezier(0.3, 0.7, 0.4, 1);
  --hero-grad: linear-gradient(135deg, #eef0fd 0%, #f6f2ff 45%, #e9f6f7 100%);
  --content-width: 1080px;
}

[data-theme="dark"] {
  --bg: #0c0e16;
  --surface: #151826;
  --surface-2: #1c2033;
  --text: #e8eaf4;
  --muted: #a6acc6;
  --border: #2a2f47;
  --border-strong: #3a4060;

  --primary: #9aa0ff;
  --primary-strong: #b6baff;
  --primary-soft: #232649;
  --link: #b3b8ff;
  --accent: #4fd4c8;
  --accent-soft: #143338;

  --danger: #ff9187;
  --success: #5ad88a;
  --warn: #e5b567;

  --level-a: #55d3c9;  --level-a-bg: #113738;
  --level-b: #aeb2ff;  --level-b-bg: #23264d;
  --level-c: #e5b567;  --level-c-bg: #3a2f16;
  --level-d: #f394bd;  --level-d-bg: #401c30;

  --st-todo: #5b6180;
  --st-learning: #e0a83a;
  --st-done: #56cf87;

  --edge: rgba(154, 160, 255, 0.25);
  --edge-hot: #9aa0ff;
  --node-fill: #151826;
  --node-border: #3a4060;

  --code-bg: #10131f;
  --code-text: #dfe3f5;
  --formula-bg: #191d30;
  --tok-kw: #9aa6ff;
  --tok-str: #6fe3c4;
  --tok-num: #ffcf8a;
  --tok-comment: #7b84a6;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.5), 0 18px 50px rgba(0, 0, 0, 0.45);
  --hero-grad: linear-gradient(135deg, #141833 0%, #1a1530 45%, #0f272c 100%);
}