/* ============================================================
   设计令牌 (Design Tokens) — 配色 / 字体 / 间距 / 阴影 / 圆角
   主题:现代学术绿。支持 [data-theme="dark"]
   ============================================================ */

/* ---- 自带等宽字体:JetBrains Mono(离线可用) ---- */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
}

:root {
  /* 字体族 */
  --font-ui: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui,
    -apple-system, "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --font-code: Consolas, "Cascadia Mono", "Cascadia Code", "JetBrains Mono",
    "Sarasa Mono SC", "Microsoft YaHei UI", "Courier New", monospace;

  /* 字号梯度 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-code: 14.5px;
  --lh-code: 1.72;

  /* 间距梯度 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 30px; --s7: 42px; --s8: 60px;

  /* 圆角 */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  /* ---- 浅色主题 ---- */
  --paper: #f3f6f4;
  --paper-grad: radial-gradient(1200px 600px at 78% -8%, #e9f3ee 0%, transparent 60%),
    radial-gradient(900px 500px at -6% 4%, #eef1ea 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: #eef3f0;
  --surface-3: #e6ede8;
  --ink: #15241d;
  --ink-soft: #45554d;
  --ink-mute: #79897f;
  --line: #e0e8e2;
  --line-strong: #cfdbd3;

  --brand: #0f7a64;
  --brand-strong: #0a5d4c;
  --brand-ink: #0a4e40;
  --brand-soft: #e2f1ec;
  --on-brand: #ffffff;

  --accent: #bb8526;
  --accent-soft: #f7ecd5;
  --info: #2f6db0;
  --info-soft: #e6f0fa;
  --ok: #2c8a57;
  --ok-soft: #e1f2e8;
  --warn: #b87514;
  --warn-soft: #f9eed7;
  --danger: #c1473f;
  --danger-soft: #fbe7e5;

  /* 代码块(浅色下也用深底,与品牌色调和而非刺眼蓝) */
  --code-bg: #0e1a17;
  --code-bg-2: #13231e;
  --code-ink: #d7e6df;
  --code-line: #233a32;
  --code-gutter: #5b7268;
  --tok-kw: #6fd0bb;
  --tok-type: #e8b85c;
  --tok-fn: #74b6f0;
  --tok-str: #9bd182;
  --tok-num: #ef9f8c;
  --tok-cmt: #6a8479;
  --tok-pre: #c8a6e6;
  --tok-op: #b9c9c1;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(16, 40, 32, .06), 0 1px 3px rgba(16, 40, 32, .05);
  --shadow: 0 4px 14px rgba(16, 45, 35, .08), 0 2px 6px rgba(16, 45, 35, .05);
  --shadow-lg: 0 18px 44px rgba(13, 40, 31, .14), 0 6px 16px rgba(13, 40, 31, .08);
  --ring: 0 0 0 3px rgba(15, 122, 100, .18);

  --content-max: 1680px;
  --sidebar-w: 264px;
  --lesson-rail-w: 232px;
  --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ---- 深色主题 ---- */
[data-theme="dark"] {
  --paper: #0d1411;
  --paper-grad: radial-gradient(1100px 560px at 80% -10%, #11231c 0%, transparent 60%),
    radial-gradient(820px 480px at -6% 2%, #101a16 0%, transparent 55%);
  --surface: #14201b;
  --surface-2: #1a2922;
  --surface-3: #21342b;
  --ink: #e7f0ea;
  --ink-soft: #a9bdb3;
  --ink-mute: #7c9389;
  --line: #25352c;
  --line-strong: #324737;

  --brand: #38bd9e;
  --brand-strong: #5fd3b6;
  --brand-ink: #bdeade;
  --brand-soft: #122a22;
  --on-brand: #04221b;

  --accent: #e0ad53;
  --accent-soft: #2e2613;
  --info: #6aa9e6;
  --info-soft: #15273a;
  --ok: #56c489;
  --ok-soft: #142c1f;
  --warn: #d99a3c;
  --warn-soft: #2d2412;
  --danger: #e3756c;
  --danger-soft: #321a18;

  --code-bg: #0a1512;
  --code-bg-2: #0f1d18;
  --code-ink: #d4e4dc;
  --code-line: #1d322a;
  --code-gutter: #546b61;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 6px 18px rgba(0, 0, 0, .38);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);
  --ring: 0 0 0 3px rgba(56, 189, 158, .25);
}