/* ==========================================================================
   Treeing 全球核心 VI —— 设计变量（v0.2）
   说明见 docs/vi.md。v0.2：主色统一为原 Logo 绿 #037434；新增中文、图表色、深色模式。网站样式只引用这里的变量，不直接写颜色值和字号。
   字体全部自托管（design/fonts/，SIL OFL 1.1），按字符范围按需加载：
   英文页面只下载 latin，越南语页面加载 vietnamese，泰语页面加载 thai。
   中文页面另外引用 fonts-sc.css（思源黑体，按字符分片加载）。
   ========================================================================== */

/* ---------- 字体 ---------- */
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-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: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-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: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-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: "Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-700-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: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-400-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-500-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-600-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-ext-700-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-vietnamese-500-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-vietnamese-600-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ibm-plex-sans-vietnamese-700-normal.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

/* 泰文：IBM Plex Sans Thai，与 Plex Sans 同一设计体系，可在同一段文字中混排 */
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2");
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-thai-thai-500-normal.woff2") format("woff2");
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2");
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ibm-plex-sans-thai-thai-700-normal.woff2") format("woff2");
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }

/* 等宽：只用于型号、单位、参数标签等“数据感”文字 */
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* ---------- 颜色：品牌（v0.2 以原 Logo 字标绿 #037434 为主色重建） ---------- */
  --tr-green-900: #0c2418;   /* 墨绿：深色区块背景、页脚 */
  --tr-green-800: #014d22;   /* 按钮按下（白字 10.1:1） */
  --tr-green-700: #025f2a;   /* 链接悬停、浅绿底上的小字（白底 7.9:1，浅绿底 6.7:1） */
  --tr-green-600: #037434;   /* 品牌主色：主按钮、链接、图标、Logo 字标（白底 5.9:1） */
  --tr-green-200: #bfe0ca;   /* 选中行、进度条底 */
  --tr-green-100: #e3f1e7;   /* 浅绿底：标签、提示条（主色字 5.1:1） */
  --tr-green-50:  #f1f8f3;   /* 极浅绿：悬停行 */
  --tr-leaf: #8cc63f;        /* 叶绿：只做点缀（细线、深色底上的强调），不用于白底文字 */
  /* Logo 渐变色只用于 Logo 图形本身 */

  /* ---------- 颜色：中性（略带冷绿调的钢灰） ---------- */
  --tr-ink: #0e2018;         /* 标题 */
  --tr-text: #1f2e27;        /* 正文（14.2:1） */
  --tr-muted: #5a6962;       /* 次要文字（白底 5.8:1） */
  --tr-line: #dfe6e2;        /* 分隔线、表格线、卡片边框 */
  --tr-line-strong: #c3cec8; /* 输入框边框 */
  --tr-bg: #ffffff;          /* 页面背景 */
  --tr-surface: #ffffff;     /* 卡片 */
  --tr-surface-alt: #f3f6f4; /* 交替区块背景 */
  --tr-on-brand: #ffffff;    /* 主色按钮上的文字 */
  --tr-on-dark: #ffffff;
  --tr-on-dark-muted: #b5c7bd; /* 墨绿底上的次要文字（9.3:1） */

  /* ---------- 颜色：功能（状态色只表示状态，不用作图表系列） ---------- */
  --tr-success: #037434;
  --tr-notice-fg: #92400e;   /* “验证中 / In field validation”等提示 */
  --tr-notice-bg: #fef3c7;
  --tr-error: #b42318;
  --tr-error-bg: #fee4e2;
  --tr-info: #1f5fa8;        /* 外部资料链接、信息提示 */
  --tr-info-bg: #e3edf9;
  --tr-focus: #025f2a;       /* 键盘焦点框（浅色底 7.9:1） */
  --tr-focus-on-dark: #8cc63f; /* 深色底上的焦点框（8.0:1） */

  /* ---------- 图表色板（已用色盲校验工具验证，按顺序取用，不循环） ----------
     折线、柱状、堆叠：最多 6 个系列。散点、气泡、地图：最多 3 个系列，并加直接标注。
     第 4 色琥珀在白底对比度 2.3:1，使用时必须显示数值标签或提供数据表。 */
  --tr-chart-1: #1e8a4a;     /* 绿：本公司 / 主系列 */
  --tr-chart-2: #2a78d6;     /* 蓝 */
  --tr-chart-3: #d0507e;     /* 玫红 */
  --tr-chart-4: #d4a000;     /* 琥珀 */
  --tr-chart-5: #7a5bd0;     /* 紫 */
  --tr-chart-6: #e0702a;     /* 橙 */
  --tr-chart-grid: #e6ece9;
  --tr-chart-axis: #8a9993;
  /* 单一数量的深浅（热力图、地图）：只用绿色一个色相，由浅到深 */
  --tr-seq-1: #e3f1e7; --tr-seq-2: #bfe0ca; --tr-seq-3: #8ccaa0; --tr-seq-4: #4fa970; --tr-seq-5: #1e8a4a; --tr-seq-6: #025f2a;

  /* ---------- 字体 ---------- */
  --tr-font: "Plex Sans", "Treeing SC", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, "Noto Sans Thai", Arial, sans-serif;
  --tr-font-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* 中英混排：英文和数字用 Plex，中文用思源黑体；顺序不能颠倒，否则英文会落到中文字体的西文字形上 */

  /* 字号：基准 16px，比例约 1.2；信息密集型页面以 14–16px 为主 */
  --tr-fs-xs: 0.75rem;    /* 12  注释、表格单位（中文最小 12） */
  --tr-fs-sm: 0.875rem;   /* 14  表格、标签、辅助说明 */
  --tr-fs-md: 1rem;       /* 16  正文 */
  --tr-fs-lg: 1.125rem;   /* 18  导语 */
  --tr-fs-xl: 1.375rem;   /* 22  小标题 h3 */
  --tr-fs-2xl: 1.75rem;   /* 28  区块标题 h2（手机） */
  --tr-fs-3xl: 2.25rem;   /* 36  区块标题 h2（桌面） / 页面标题 h1（手机） */
  --tr-fs-4xl: 3rem;      /* 48  首页主标题（桌面） */

  --tr-lh-tight: 1.2;     /* 大标题 */
  --tr-lh-snug: 1.4;      /* 小标题、卡片标题 */
  --tr-lh-body: 1.6;      /* 正文 */

  /* ---------- 间距（4px 基准） ---------- */
  --tr-space-1: 4px;  --tr-space-2: 8px;  --tr-space-3: 12px; --tr-space-4: 16px;
  --tr-space-5: 24px; --tr-space-6: 32px; --tr-space-7: 48px; --tr-space-8: 64px; --tr-space-9: 96px;

  /* ---------- 圆角、线、阴影 ---------- */
  --tr-radius-sm: 6px;    /* 输入框、标签、按钮 */
  --tr-radius: 10px;      /* 卡片、图片 */
  --tr-radius-lg: 16px;   /* 大型区块、首屏面板 */
  --tr-border: 1px solid var(--tr-line);
  --tr-shadow: 0 1px 2px rgb(14 32 24 / 6%), 0 4px 16px rgb(14 32 24 / 6%);  /* 只用于浮层与悬停 */

  /* ---------- 布局 ---------- */
  --tr-container: 1240px;
  --tr-gutter: 16px;      /* 手机；≥ 900px 时 24px */
  --tr-header-h: 64px;

  /* ---------- 动效：克制，只用于状态反馈和引导注意 ---------- */
  --tr-ease: cubic-bezier(.2, .7, .2, 1);
  --tr-dur-fast: 150ms;
  --tr-dur: 250ms;
}

@media (min-width: 900px) {
  :root { --tr-gutter: 24px; }
}

/* ---------- 深色模式（软件 UI 与 Agent 界面用；网站整页保持浅色） ----------
   不是简单反色：每个颜色按深色底重新取值并核对对比度。
   用法：<html data-theme="dark">。跟随系统设置时，由页面脚本按 prefers-color-scheme 设置该属性。 */
:root[data-theme="dark"], [data-theme="dark"] {
  --tr-border: 1px solid var(--tr-line); /* 局部深色容器里重新计算边框色 */
  color-scheme: dark;
  --tr-green-600: #4cb872;   /* 深色底上的主色：按钮、链接（面板底 7.0:1） */
  --tr-green-700: #5cc27e;   /* 悬停（7.9:1） */
  --tr-green-800: #7fd39a;   /* 按下 */
  --tr-green-100: #173826;   /* 深色标签底 */
  --tr-green-200: #1f4a32;
  --tr-green-50:  #14261c;
  --tr-ink: #f2f7f4;
  --tr-text: #e6eeea;        /* 正文（14.9:1） */
  --tr-muted: #9dada5;       /* 次要文字（7.5:1） */
  --tr-line: #2a3832;
  --tr-line-strong: #3b4b44;
  --tr-bg: #0b1410;
  --tr-surface: #121b17;
  --tr-surface-alt: #18231e;
  --tr-on-brand: #0c2418;    /* 浅绿按钮上用墨绿字 */
  --tr-success: #4cb872;
  --tr-notice-fg: #f5c46b;
  --tr-notice-bg: #3a2a0c;
  --tr-error: #f97066;
  --tr-error-bg: #3d1512;
  --tr-info: #6aa6ee;
  --tr-info-bg: #12263d;
  --tr-focus: #8cc63f;
  --tr-chart-1: #2c9a58; --tr-chart-2: #4589e0; --tr-chart-3: #d65c88;
  --tr-chart-4: #b98e00; --tr-chart-5: #8b74e0; --tr-chart-6: #d2692a;
  --tr-chart-grid: #24312b;
  --tr-chart-axis: #6f7f78;
  --tr-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 30%);
}

/* ---------- 语言本地化（地区层） ----------
   越南语：声调符号叠在字母上下，行高略增；泰语：上下元音和声调叠加，行高再增，
   且词间无空格，标题不使用字距（letter-spacing），换行交给浏览器的泰语分词。
   中文：字面大、笔画密，正文行高 1.75；不加字距，不用全大写和斜体；标点用全角。 */
:lang(vi) { --tr-lh-body: 1.7; --tr-lh-snug: 1.5; --tr-lh-tight: 1.3; }
:lang(th) { --tr-lh-body: 1.8; --tr-lh-snug: 1.6; --tr-lh-tight: 1.4; }
:lang(zh) { --tr-lh-body: 1.75; --tr-lh-snug: 1.5; --tr-lh-tight: 1.35; }
:lang(th) .tr-eyebrow, :lang(zh) .tr-eyebrow { letter-spacing: 0; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root { --tr-dur-fast: 0ms; --tr-dur: 0ms; }
}