/* ══════════════════════════════════════════════════════════════
   Rabbit Lingo 设计令牌 · 两端同一份〔docs/梳理/设计准则/设计准则.md 一 · 二 · 三 · 六 · 八 · 十〕
   新屏一律只用这一层（前缀 --nx-）。旧的 color-tokens.css 和两端旧令牌名还在给没重做的屏用，
   哪一屏按准则重做，哪一屏就换到这里；全部换完再删旧的。

   ── 主题 ──────────────────────────────────────────────
   五套（准则一-6），挂在 <html data-theme="…">；没挂 = 默认湖青。
   主题 id 与名字在 src/core/design/themes.ts；存哪、两端怎么同步归设置。
   每套只有这几档：深 · 主 · 浅 · 最浅 · 按钮底 · 伴色 · 伴色字，外加三样算出来的：
     --nx-btn-hover   按钮底往深档压 25%（准则七-1「按钮底压暗一档」）——白字对比都 ≥ 5.9
     --nx-mate-soft   伴色 16% 浅底（准则一-4 / 一-5）——伴色字放上面都 ≥ 5.2
     --nx-mate-mark   ✓ 圆点里的记号：白和深档里对伴色对比高的那个（准则一-5）
   算法：sRGB 线性混合，算一次写死；不用 color-mix（手机旧 WebView 不认）。

   ── 两端不同的数 ────────────────────────────────────────
   字号、页边、疏密两端不同（准则二-2 · 三-2 · 八-3 · 十-1）：:root 写电脑，
   :root[data-end='phone'] 改成手机；手机入口启动时给 <html> 挂 data-end="phone"。
   ══════════════════════════════════════════════════════════════ */

:root,
:root[data-theme='lake'] {
  --nx-deep: #16434f;
  --nx-main: #1e9cac;
  --nx-light: #71e1e2;
  --nx-faint: #e3f9f9;
  --nx-btn: #247586;
  --nx-btn-hover: #206878;
  --nx-mate: #fe8ba9;
  --nx-mate-ink: #8b3e50;
  --nx-mate-soft: #ffecf1;
  --nx-mate-mark: var(--nx-deep);
}
:root[data-theme='indigo'] {
  --nx-deep: #142e4c;
  --nx-main: #3553b8;
  --nx-light: #a3b3e6;
  --nx-faint: #edf0fa;
  --nx-btn: #3553b8;
  --nx-btn-hover: #2d4a9d;
  --nx-mate: #d9a84e;
  --nx-mate-ink: #875c10;
  --nx-mate-soft: #f9f1e3;
  --nx-mate-mark: var(--nx-deep);
}
:root[data-theme='sprout'] {
  --nx-deep: #1f5236;
  --nx-main: #64a218;
  --nx-light: #cbf07f;
  --nx-faint: #f5fce5;
  --nx-btn: #4a7a12;
  --nx-btn-hover: #3f701b;
  --nx-mate: #c2583e;
  --nx-mate-ink: #9e3e28;
  --nx-mate-soft: #f5e4e0;
  --nx-mate-mark: #ffffff;
}
:root[data-theme='maple'] {
  --nx-deep: #522622;
  --nx-main: #ca5542;
  --nx-light: #e2a78b;
  --nx-faint: #f9ede8;
  --nx-btn: #b0432f;
  --nx-btn-hover: #983c2c;
  --nx-mate: #49aba3;
  --nx-mate-ink: #1f6e67;
  --nx-mate-soft: #e2f2f0;
  --nx-mate-mark: var(--nx-deep);
}
:root[data-theme='blossom'] {
  --nx-deep: #82284a;
  --nx-main: #ef5e82;
  --nx-light: #fe879e;
  --nx-faint: #ffe7ec;
  --nx-btn: #c2375e;
  --nx-btn-hover: #b23359;
  --nx-mate: #5ad3c6;
  --nx-mate-ink: #1e7268;
  --nx-mate-soft: #e5f8f6;
  --nx-mate-mark: var(--nx-deep);
}

:root {
  /* ── 中性色阶（各套共用，准则一-6）── */
  --nx-n900: #1a1e26;
  --nx-n700: #3a414c;
  --nx-n600: #5b6371;
  --nx-n500: #6f7783;
  --nx-n400: #9aa1ac;
  --nx-n300: #c9ced6;
  --nx-n200: #e3e6eb;
  --nx-n100: #eef0f3;
  --nx-n50: #f6f7f9;
  --nx-n0: #ffffff;
  --nx-black: #000000; /* 危险按钮悬停（准则七-1「纯黑」）*/

  /* ── 字体栈（准则二-1）── */
  --nx-font-display: 'EB Garamond', 'Noto Serif SC', serif;
  --nx-font-zh: 'Rabbit Lingo Latin Quote', 'Noto Serif SC', serif; /* 第一族只管 ‘ ’ 两个码位（fonts.css 末尾），别的字照旧宋体 */
  --nx-font-ui: 'Jost', 'Noto Serif SC', sans-serif;

  /* ── 字号（准则二-2 · 十-1；电脑）── */
  --nx-fz-xxl: 68px; /* 英文单词（详情、学会时刻）*/
  --nx-fz-big: 51px; /* 统计大数字（主色，一屏最多两三个）*/
  --nx-fz-xl: 42px;
  --nx-fz-title: 34px; /* 页面标题（中档活力）*/
  --nx-fz-l: 26px;
  --nx-fz-m: 20px;
  --nx-fz-word: 20px; /* 列表里的词 */
  --nx-fz-s: 16px;
  --nx-fz-xs: 13px;
  --nx-lh-zh: 1.7;
  --nx-lh-en: 1.5;
  --nx-lh-title: 1.3;
  --nx-lh-word: 1.05;

  /* ── 尺度阶梯（准则三-1：只用这九个数）── */
  --nx-sp-3: 3px;
  --nx-sp-6: 6px;
  --nx-sp-12: 12px;
  --nx-sp-18: 18px;
  --nx-sp-24: 24px;
  --nx-sp-36: 36px;
  --nx-sp-48: 48px;
  --nx-sp-72: 72px;
  --nx-sp-96: 96px;

  /* ── 版式与疏密（准则三-2 · 八-3 · 十-1；电脑）── */
  --nx-page-x: 48px;
  --nx-page-top: 48px;
  --nx-page-bottom: 72px;
  --nx-measure: 720px; /* 主区正文最宽 */
  --nx-side: 240px; /* 电脑侧栏 */
  --nx-title-gap: 48px; /* 标题区下面 */
  --nx-block-gap: 48px; /* 区块之间 */
  --nx-card-pad: 24px;
  --nx-row: 48px; /* 知识点列表行 */
  --nx-tap: 36px; /* 可点区域下限 */
  --nx-ring: 108px; /* 十二等分进度环 */
  --nx-ring-num: 34px;

  /* ── 尺寸（准则三-3）── */
  --nx-h-btn: 48px;
  --nx-h-btn-sm: 36px;
  --nx-h-tag: 24px;

  /* ── 圆角（准则三-4）── */
  --nx-r-pill: 999px;
  --nx-r-card: 12px;
  --nx-r-dialog: 18px;
  --nx-r-dialog-in: 12px; /* 弹窗内框 = 18 − 6 */
  --nx-r-box: 6px;

  /* ── 层次（准则三-7）── */
  --nx-lift: 0 6px 18px rgb(26 30 38 / 0.1);
  --nx-modal: 0 12px 36px rgb(26 30 38 / 0.14);
  --nx-scrim: rgb(26 30 38 / 0.32);

  /* ── 动效（准则六）── */
  --nx-t1: 120ms;
  --nx-t2: 240ms;
  --nx-t3: 360ms;
  --nx-t4: 600ms;
  --nx-ease-in: cubic-bezier(0.2, 0, 0, 1); /* 进场 */
  --nx-ease-out: cubic-bezier(0.4, 0, 1, 1); /* 退场 */
  --nx-ease-move: cubic-bezier(0.4, 0, 0.2, 1); /* 位移 */
}

:root[data-end='phone'] {
  --nx-fz-xxl: 51px;
  --nx-fz-big: 40px;
  --nx-fz-xl: 34px;
  --nx-fz-title: 28px;
  --nx-fz-l: 22px;
  --nx-fz-m: 18px;
  --nx-fz-word: 19px;
  --nx-fz-s: 15px;
  --nx-fz-xs: 13px;

  --nx-page-x: 24px;
  --nx-page-top: 24px;
  --nx-page-bottom: 36px;
  --nx-title-gap: 30px; /* 准则十-1：手机 30（阶梯外，只这一处）*/
  --nx-block-gap: 36px;
  --nx-card-pad: 18px;
  --nx-row: 72px;
  --nx-tap: 48px;
  --nx-ring: 84px;
  --nx-ring-num: 26px;
}

/* 字重只用打包的那几档，不许浏览器合成假粗体（准则二 · 主控 10-14）：
   Jost / EB Garamond 只打包到 500，思源宋体到 600 —— 写了 600 / 700 的，字体匹配自己落到最近那一档（Jost 500 · 宋体 600），不再糊边。
   font-synthesis-weight 会继承，设在根上两端全站生效（Shadow DOM 里 all:initial 的那几处要自己再写一遍）。 */
:root {
  font-synthesis-weight: none;
}

/* 手机可点区补到 48（准则：可点区 ≥ 48 · 全面审 10-20 第 33 条）：高 24 的标签与全局状态小标记（「同步没完成 · 重试」唯一入口）、
   高 36 的小按钮、20 的复选框，以及组件里自己画的小图标钮挂上 nx-tapx 的 —— 样子一像素不变，用一层透明外扩把手指点得到的地方补足。
   定位用 :where（特异度 0）：组件里自己写了 absolute / fixed 的照它的。量这件事的闸在 scripts/width-scan.ts（verdict 'tap'）。 */
:where(:root[data-end='phone']) :where(button.nx-tag, button.nx-status, button.nx-check, button.nx-btn.nxk-small, .nx-tapx) {
  position: relative;
}
:root[data-end='phone'] :is(button.nx-tag, button.nx-status:enabled, button.nx-check, button.nx-btn.nxk-small, .nx-tapx)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--nx-tap));
  height: max(100%, var(--nx-tap));
  transform: translate(-50%, -50%);
}