/* 由 scripts/sync-noe.mjs 从 mahoro.cn 主站 public/assets/noe.css 同步而来 —— 不要在这里改，改主站再同步。 */
/*
 * noe.css — Mahoro 全站设计系统（与 noehub.com 同一套设计语言）
 * ─────────────────────────────────────────────────────────────────────
 * 来源：NoeHub Figma Design System —— 配色 "Orange and Black"（12 级，明/暗），
 *       字体 Source Serif 4（标题）+ Source Sans 3（正文/UI）+ Source Code Pro（代码）。
 *       母本：~/Website/noehub-site-v2/src/styles.css。noehub 改色时，只改本文件的
 *       「① 色板」两块，其余全部走语义 token，自动跟随。
 *
 * 分层（每一层只依赖上一层）：
 *   ① 色板 primitives   --noe-orange-1..12 / --noe-gray-1..12（明、暗各一套）
 *   ② 语义 tokens       --noe-canvas / --noe-text / --noe-brand …  ← 页面只该用这一层
 *   ③ 字体 / 尺寸       --noe-serif / --noe-sans / --noe-mono / --noe-radius …
 *   ④ 基础排版          body、链接、选区、焦点
 *   ⑤ 组件              .noe-*（导航条、主题切换、按钮、标签、面板、眉标、页脚）
 *
 * 约定：
 *   - 所有 token 与组件都带 noe- 前缀：报告页各自内联的 --ink / .card / .tag 不会撞名。
 *   - 主题由 <html data-theme="light|dark"> 决定（noe.js 在首帧前写入，
 *     localStorage 'mh-theme' 契约不变）。
 *   - 中文没有 Source 系列字形，按字符自动回落到思源 / Noto / 系统宋体、苹方。
 * 用法与扩展方法见 public/DESIGN_SYSTEM.md。
 */

/* ── fonts（自托管，SIL OFL 1.1，见 /assets/fonts/OFL.txt；只含拉丁字符） ── */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/noe/source-serif-4-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/noe/source-serif-4-latin-opsz-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/noe/source-sans-3-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/noe/source-code-pro-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/noe/source-serif-4-latin-ext-opsz-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/noe/source-serif-4-latin-ext-opsz-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/noe/source-sans-3-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/noe/source-code-pro-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── ① 色板：Orange and Black（明） ──────────────────────────────────── */
:root {
  --noe-orange-1: #fefcfb; --noe-orange-2: #fff7ec; --noe-orange-3: #ffeccf; --noe-orange-4: #ffddaf;
  --noe-orange-5: #ffd196; --noe-orange-6: #ffc278; --noe-orange-7: #f8b166; --noe-orange-8: #eb9937;
  --noe-orange-9: #f88e00; --noe-orange-10: #e98400; --noe-orange-11: #b66400; --noe-orange-12: #52320d;
  --noe-gray-1: #fdfdfd; --noe-gray-2: #f9f9f9; --noe-gray-3: #f0f0f0; --noe-gray-4: #e8e8e8;
  --noe-gray-5: #e1e1e1; --noe-gray-6: #d9d9d9; --noe-gray-7: #cecece; --noe-gray-8: #bbbbbb;
  --noe-gray-9: #8c8c8c; --noe-gray-10: #828282; --noe-gray-11: #626262; --noe-gray-12: #202020;

  /* ── ② 语义 tokens（明） ── */
  --noe-canvas: var(--noe-gray-2);
  --noe-surface: var(--noe-gray-1);
  --noe-surface-raised: #ffffff;
  --noe-surface-a: rgba(253, 253, 253, 0.74);   /* 半透明面板：透出 3D 舞台 */
  --noe-surface-sunken: var(--noe-gray-3);
  --noe-fill-hover: var(--noe-gray-3);
  --noe-text-strong: var(--noe-gray-12);
  --noe-text: var(--noe-gray-11);
  --noe-text-2: #6e6e6e;                        /* gray-9 只有 3.2:1，这里取 4.8:1（WCAG AA） */
  --noe-border-subtle: var(--noe-gray-6);
  --noe-border: var(--noe-gray-7);
  --noe-border-strong: var(--noe-gray-8);
  --noe-brand: var(--noe-orange-9);             /* 实心填充：按钮、圆点、进度条 */
  --noe-brand-hover: var(--noe-orange-10);
  --noe-brand-text: #9e5700;                    /* 小字号橙色文字：5.2:1 */
  --noe-brand-display: #d27700;                 /* 大字号橙色（标题强调、大数字）：3.1:1 */
  --noe-brand-bg: var(--noe-orange-3);
  --noe-brand-bg-hover: var(--noe-orange-4);
  --noe-brand-border: var(--noe-orange-7);
  --noe-focus: var(--noe-orange-8);
  --noe-on-brand: #1a1206;                      /* 橙底上的字：白字只有 2.4:1 */
  --noe-code-bg: var(--noe-gray-12);
  --noe-code-ink: var(--noe-gray-3);
  --noe-inverse-bg: var(--noe-gray-12);         /* 反色色带（论点框、深色页脚） */
  --noe-inverse-text: #eeeeee;
  --noe-inverse-text-2: #b6b6b6;
  --noe-inverse-brand: #ffb24d;
  --noe-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.05);
  --noe-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.14);
  --noe-scrim: rgba(249, 249, 249, 0.78);

  /* 数据语义：涨跌 / 警示。不是品牌色，所以不跟橙色走 */
  --noe-pos: #2b7a52;
  --noe-neg: #b8432f;
  --noe-warn: var(--noe-orange-11);
  /* 图表分类色：先橙、再墨、再灰，第 4 色起才引入冷色以保证可区分 */
  --noe-viz-1: var(--noe-orange-9);
  --noe-viz-2: var(--noe-gray-12);
  --noe-viz-3: var(--noe-gray-9);
  --noe-viz-4: #3f6f8f;
  --noe-viz-5: #2b7a52;
  --noe-viz-6: var(--noe-orange-12);
  --noe-viz-grid: var(--noe-gray-5);

  /* ── ③ 字体与尺寸 ── */
  --noe-serif: 'Source Serif 4', 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, serif;
  --noe-sans: 'Source Sans 3', 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --noe-mono: 'Source Code Pro', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --noe-radius: 8px;
  --noe-radius-tag: 4px;
  --noe-gutter: clamp(16px, 4vw, 56px);
  --noe-wrap: 1280px;
  --noe-nav-h: 64px;
  color-scheme: light;
}

/* ── ① 色板：Orange and Black（暗，手调色阶，原样使用） ───────────────── */
:root[data-theme='dark'] {
  --noe-orange-1: #24201c; --noe-orange-2: #2b251d; --noe-orange-3: #3d2d19; --noe-orange-4: #4e3109;
  --noe-orange-5: #5a390b; --noe-orange-6: #66461c; --noe-orange-7: #7a5629; --noe-orange-8: #976b32;
  --noe-orange-9: #ffb24d; --noe-orange-10: #f4a841; --noe-orange-11: #ffb955; --noe-orange-12: #ffe2c1;
  --noe-gray-1: #212121; --noe-gray-2: #282828; --noe-gray-3: #303030; --noe-gray-4: #363636;
  --noe-gray-5: #3c3c3c; --noe-gray-6: #444444; --noe-gray-7: #505050; --noe-gray-8: #676767;
  --noe-gray-9: #737373; --noe-gray-10: #7f7f7f; --noe-gray-11: #b6b6b6; --noe-gray-12: #eeeeee;

  /* ── ② 语义 tokens（暗）：只列和明色不同映射的项 ── */
  --noe-canvas: #000000;
  --noe-surface-raised: var(--noe-gray-2);
  --noe-surface-a: rgba(33, 33, 33, 0.86);
  --noe-surface-sunken: #121212;
  --noe-fill-hover: var(--noe-gray-2);
  --noe-text-2: #8a8a8a;                        /* gray-9 在纯黑上只有 4.4:1 */
  --noe-brand-text: var(--noe-orange-11);
  --noe-brand-display: var(--noe-orange-11);
  --noe-code-bg: #121212;
  --noe-code-ink: var(--noe-gray-11);
  --noe-inverse-bg: #161616;
  --noe-inverse-text: #eeeeee;
  --noe-inverse-text-2: #a0a0a0;
  --noe-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.45);
  --noe-shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.6);
  --noe-scrim: rgba(0, 0, 0, 0.72);
  --noe-pos: #5cc48c;
  --noe-neg: #ff7d68;
  --noe-viz-4: #7fb0d4;
  --noe-viz-5: #5cc48c;
  color-scheme: dark;
}

/* ── ④ 基础（报告页的内联样式写在本文件之后，同优先级时它们会赢；report.css 再统一压回） ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noe-canvas);
  color: var(--noe-text);
  font-family: var(--noe-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--noe-brand); color: var(--noe-on-brand); }
:focus-visible { outline: 2px solid var(--noe-focus); outline-offset: 2px; border-radius: 4px; }
.noe-wrap { width: 100%; max-width: var(--noe-wrap); margin-inline: auto; padding-inline: var(--noe-gutter); }
.noe-serif-em { font-family: var(--noe-serif); font-style: italic; font-weight: 400; color: var(--noe-brand-display); }
.noe-mono { font-family: var(--noe-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.02em; }
.noe-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── ⑤ 组件 ─────────────────────────────────────────────────────────── */

/* 导航条：落地页（.site-head）与报告页（noe.js 注入的 .noe-nav）共用一套外观。
   默认透明，滚动后挂 .is-scrolled 变成磨砂底；报告页向下滚时 .is-hidden 收起，往回滚再出现。 */
.noe-nav, .site-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: var(--noe-nav-h);
  padding: 0 var(--noe-gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  font-family: var(--noe-sans);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.noe-nav.is-scrolled, .site-head.is-scrolled {
  background: var(--noe-scrim);
  border-bottom-color: var(--noe-border-subtle);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.noe-nav.is-hidden { transform: translateY(-100%); }
.noe-brand, .site-head .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 18px/24px var(--noe-sans); letter-spacing: 0;
  color: var(--noe-text-strong); text-decoration: none;
}
.noe-brand__dot, .site-head .brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--noe-brand); box-shadow: 0 0 0 4px var(--noe-brand-bg);
}
.site-head .brand-mark { font: inherit; letter-spacing: inherit; }
.noe-nav__links, .site-head .site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.noe-nav__links a, .site-head .site-nav a {
  font: 600 14px/20px var(--noe-sans); color: var(--noe-text);
  padding: 8px 12px; border-radius: var(--noe-radius); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.noe-nav__links a:hover, .site-head .site-nav a:hover { background: var(--noe-fill-hover); color: var(--noe-text-strong); }
.noe-nav__links a[aria-current], .site-head .site-nav a[aria-current] { color: var(--noe-brand-text); background: var(--noe-brand-bg); }

/* 主题切换（Design System "Switcher"）：Light / Dark 两段 */
.noe-switcher {
  display: inline-flex; padding: 2px; gap: 2px;
  border-radius: var(--noe-radius);
  background: var(--noe-fill-hover);
  border: 1px solid var(--noe-border-subtle);
}
.noe-switcher button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--noe-text-2); font: 600 12px/16px var(--noe-sans);
  cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.noe-switcher button:hover { color: var(--noe-text-strong); }
.noe-switcher button[aria-pressed='true'] { background: var(--noe-surface-raised); color: var(--noe-brand-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.noe-switcher svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 480px) {
  .noe-switcher__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .noe-switcher button { padding: 0 9px; }
}
/* 旧的圆形 ◐ 按钮：noe.js 会把它换成 .noe-switcher；无 JS 时隐藏 */
.theme-toggle { display: none; }

/* 按钮（Design System "Button"：高 40，圆角 8，左右 16） */
.noe-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: var(--noe-radius); border: 1px solid transparent;
  font: 600 16px/20px var(--noe-sans); white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.noe-btn--lg { height: 48px; padding: 0 20px; }
.noe-btn--sm { height: 36px; padding: 0 12px; font-size: 14px; }
.noe-btn--brand { background: var(--noe-brand); color: var(--noe-on-brand); }
.noe-btn--brand:hover { background: var(--noe-brand-hover); }
.noe-btn--ghost { background: var(--noe-surface-a); border-color: var(--noe-border-strong); color: var(--noe-text-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.noe-btn--ghost:hover { background: var(--noe-fill-hover); border-color: var(--noe-focus); }

/* 眉标（Typography "Overline"）+ 圆点 */
.noe-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/16px var(--noe-sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--noe-brand-text);
}
.noe-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--noe-brand); box-shadow: 0 0 0 4px var(--noe-brand-bg); flex: none; }

/* 标签（Design System "Tag"：圆角 4） */
.noe-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--noe-radius-tag);
  font: 600 12px/16px var(--noe-sans);
  background: var(--noe-surface); border: 1px solid var(--noe-border-subtle); color: var(--noe-text);
}
.noe-tag--brand { background: var(--noe-brand-bg); border-color: transparent; color: var(--noe-brand-text); }

/* 面板：平面、细边、轻磨砂，让 3D 舞台透出来 */
.noe-panel {
  background: var(--noe-surface-a);
  border: 1px solid var(--noe-border-subtle);
  border-radius: var(--noe-radius);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--noe-shadow);
}

/* 页脚 */
.noe-foot, .site-foot {
  border-top: 1px solid var(--noe-border-subtle);
  padding-block: 24px;
  font: 400 13px/20px var(--noe-sans); color: var(--noe-text-2);
}
.noe-foot__inner, .site-foot .foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.noe-foot a, .site-foot a { color: inherit; text-decoration: none; }
.noe-foot a:hover, .site-foot a:hover { color: var(--noe-text-strong); }
.site-foot .foot-dim { font-family: var(--noe-mono); font-size: 12px; }

/* 主题切换时的短暂过渡（noe.js 在 <html> 上挂 .noe-theme-anim ~300ms） */
html.noe-theme-anim, html.noe-theme-anim * {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, fill .28s ease, stroke .28s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .noe-nav, .site-head { transition: none; }
}