/* 学个明白雅思 — 原型 D 设计 token（v2：响应式 + 自托管字体）
 * 全站样式只引用这里的变量；app.css 与页面内样式不写裸色值、裸间距。
 * 对比度（WCAG）：text-1/text-2 在 bg、surface、surface-2 上均 ≥ 5.8:1；
 * brand 文字在 surface 上 5.25:1；hero 上黄字 4.55:1、白字 7.35:1；err 在 err-soft 上 5.05:1。
 * text-3 只用于占位符、图标、分隔性小元素，不承载必须阅读的正文。
 *
 * 断点（媒体查询里不能用变量，统一按这四档写）：
 *   手机 <768（底部 Tab） · 平板 768–1199（80px 图标侧栏） · 桌面 ≥1200（248px 侧栏） · 超宽 ≥1600（内容区放宽到 1280）
 *
 * 字体（全部 OFL，自托管到 fonts/，上线放腾讯云 COS + CDN，不依赖 Google Fonts）：
 *   拉丁/数字/音标：Inter（子集 54KB，wght 400–800 可变）
 *   英文词条：Source Serif 4（子集 31KB，wght 500–700，opsz 固定 48，字典质感）
 *   中文：系统字体栈（苹方 / 微软雅黑 UI / 思源黑体）；无系统中文字体时兜底到自托管 Noto Sans SC 分片（fonts/noto-sc.css，按需加载）
 */

/* 拉丁 UI 字体：中文语境里的弯引号、省略号、破折号交给中文字体（全角、居中），所以这几个码位不进 unicode-range */
@font-face { font-family: "XG Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/inter-latin.var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-2013, U+2015-2017, U+201E-2025, U+2027-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+0250-02AF, U+02B0-02FF, U+1D00-1DBF; }
/* 英文段落（lang="en"）：同一个文件，码位全开，I’ll / “quote” 用英文标点 */
@font-face { font-family: "XG Inter Text"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/inter-latin.var.woff2) format("woff2"); }
@font-face { font-family: "XG Serif"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(fonts/sourceserif4-latin.var.woff2) format("woff2"); }

:root {
  /* ── 间距：8pt，允许 4 作为半步 ── */
  --sp-h: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --gutter: 16px;
  --tap: 44px;                 /* 最小触控尺寸 */

  /* ── 字号阶梯（中文行高按 1.4–1.6 取 4 的倍数） ── */
  --fs-hero: 72px;   --lh-hero: 68px;     /* 品牌时刻的大编号 */
  --fs-display: 32px; --lh-display: 40px; /* 大标题 */
  --fs-title: 22px;  --lh-title: 32px;    /* 标题 */
  --fs-head: 17px;   --lh-head: 24px;     /* 小标题 / 列表主文字 */
  --fs-body: 16px;   --lh-body: 26px;     /* 正文 */
  --fs-sub: 14px;    --lh-sub: 22px;      /* 辅助 */
  --fs-cap: 12px;    --lh-cap: 16px;      /* 标签 / 注释 */
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", "XG Noto SC";
  --font: "XG Inter", var(--font-cjk), system-ui, sans-serif;
  --font-en: "XG Inter Text", var(--font-cjk), system-ui, sans-serif;
  --font-num: "XG Inter", system-ui, "Segoe UI", sans-serif;
  --font-word: "XG Serif", "Iowan Old Style", Georgia, var(--font-cjk), serif;
  --font-ipa: "XG Inter Text", "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --track-display: -.022em;    /* 大号拉丁/数字收紧 */
  --track-title: -.011em;

  /* ── 圆角 ── */
  --r-xs: 6px;    /* 标签 */
  --r-sm: 10px;   /* 按钮、输入框 */
  --r-md: 16px;   /* 卡片、分组 */
  --r-lg: 24px;   /* hero、底部弹层 */
  --r-full: 999px;

  /* ── 阴影：两级，极轻 ── */
  --sh-1: 0 1px 2px rgba(18, 24, 21, .05), 0 0 0 1px rgba(18, 24, 21, .03);
  --sh-2: 0 12px 32px rgba(18, 24, 21, .10);

  /* ── 动效 ── */
  /* 三档时长：按压/悬停 120 · 状态切换 200 · 进场/弹层 320；进场一律 ease-out，状态一律 ease */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ── 颜色：中性灰阶 ── */
  --bg: #F5F6F3;
  --surface: #FFFFFF;
  --surface-2: #EEF0EC;
  --surface-3: #E3E6E1;
  --line: #E1E4DF;
  --line-strong: #CBD0CA;
  --text-1: #121815;
  --text-2: #535E57;
  --text-3: #7A847E;
  --glass: rgba(245, 246, 243, .94);   /* v2：从 .78 提到 .94，内容透出不再干扰 */
  --glass-surface: rgba(255, 255, 255, .94);
  --hover: rgba(18, 24, 21, .04);
  --ring: rgba(30, 123, 78, .45);
  --sh-hover: 0 1px 2px rgba(18, 24, 21, .06), 0 6px 16px rgba(18, 24, 21, .07), 0 0 0 1px rgba(18, 24, 21, .04);
  --scrim: rgba(10, 14, 12, .36);
  --scrim-coach: rgba(10, 14, 12, .62);  /* 新手指引遮罩：比弹层更深，突出挖孔 */
  --press: rgba(18, 24, 21, .06);
  --pill: #FFFFFF;           /* 分段控件选中块 */

  /* ── 品牌 ── */
  --brand: #1E7B4E;
  --brand-press: #176240;
  --brand-soft: #E6F1EA;
  --brand-on: #FFFFFF;
  --hero: #176240;          /* 品牌时刻底色 */
  --hero-2: #1E7B4E;
  --hero-line: rgba(255, 255, 255, .16);
  --on-hero: #FFFFFF;
  --on-hero-2: #CFE6D9;
  --accent: #F6C544;        /* 品牌黄：大编号、hero 主按钮、荧光笔 */
  --accent-press: #E8B42C;
  --accent-ink: #2B2100;
  --accent-soft: rgba(246, 197, 68, .42);

  /* ── 语义 ── */
  --ok: #1E7B4E;   --ok-soft: #E6F1EA;
  --err: #B93226;  --err-soft: #FBE9E7;
  --warn: #8A5300; --warn-soft: #FBF0DC;

  /* ── 科目色（视频封面、徽标；白字对比 ≥ 4.5） ── */
  --sk-listen: #1E6E8C;
  --sk-speak: #8A4A9E;
  --sk-read: #A4511F;
  --sk-write: #34558F;
  --sk-vocab: #1E7B4E;
  --sk-all: #A3305E;          /* 综合：深玫红。原灰绿 #3F4A44 在部分显示器上像灰色；和其余五科色相（197/285/22/220/150°）拉开，白字 6.7:1 */
  /* 外部站徽标底色（按站名哈希取一个） */
  --mono-1: #2C5E8C; --mono-2: #8C3B3B; --mono-3: #5B4A9A; --mono-4: #1F6B5C;
  --mono-5: #8A5A1A; --mono-6: #3E4E62; --mono-7: #8A3F6E; --mono-8: #4E6B2A;
  --on-color: #FFFFFF;

  --img-dim: none;            /* 插画：深色模式降亮度 */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1110; --surface: #171B19; --surface-2: #1F2522; --surface-3: #2A302D;
    --line: #262C29; --line-strong: #39413D;
    --text-1: #F1F4F2; --text-2: #A9B3AD; --text-3: #6F7973;
    --glass: rgba(14, 17, 16, .94); --glass-surface: rgba(23, 27, 25, .95); --hover: rgba(255, 255, 255, .04); --ring: rgba(63, 180, 123, .55); --sh-hover: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .4); --scrim: rgba(0, 0, 0, .56); --press: rgba(255, 255, 255, .06); --pill: #3A423E;
    --brand: #3FB47B; --brand-press: #36A06C; --brand-soft: #14281D; --brand-on: #06140D;
    --hero: #123F2B; --hero-2: #17503A; --hero-line: rgba(255, 255, 255, .12); --on-hero-2: #CFE6D9;
    --accent-soft: rgba(246, 197, 68, .28);
    --ok: #3FB47B; --ok-soft: #14281D; --err: #FF7A6E; --err-soft: #2E1715; --warn: #F0B44A; --warn-soft: #2B2210;
    --sh-1: 0 0 0 1px rgba(255, 255, 255, .04); --sh-2: 0 16px 40px rgba(0, 0, 0, .5);
    --img-dim: brightness(.8) saturate(.92); --scrim-coach: rgba(0, 0, 0, .74);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1110; --surface: #171B19; --surface-2: #1F2522; --surface-3: #2A302D;
  --line: #262C29; --line-strong: #39413D;
  --text-1: #F1F4F2; --text-2: #A9B3AD; --text-3: #6F7973;
  --glass: rgba(14, 17, 16, .94); --glass-surface: rgba(23, 27, 25, .95); --hover: rgba(255, 255, 255, .04); --ring: rgba(63, 180, 123, .55); --sh-hover: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .4); --scrim: rgba(0, 0, 0, .56); --press: rgba(255, 255, 255, .06); --pill: #3A423E;
  --brand: #3FB47B; --brand-press: #36A06C; --brand-soft: #14281D; --brand-on: #06140D;
  --hero: #123F2B; --hero-2: #17503A; --hero-line: rgba(255, 255, 255, .12); --on-hero-2: #CFE6D9;
  --accent-soft: rgba(246, 197, 68, .28);
  --ok: #3FB47B; --ok-soft: #14281D; --err: #FF7A6E; --err-soft: #2E1715; --warn: #F0B44A; --warn-soft: #2B2210;
  --sh-1: 0 0 0 1px rgba(255, 255, 255, .04); --sh-2: 0 16px 40px rgba(0, 0, 0, .5);
    --img-dim: brightness(.8) saturate(.92); --scrim-coach: rgba(0, 0, 0, .74);
  color-scheme: dark;
}

/* ── 布局 token：随断点变化 ── */
:root { --nav-w: 0px; --page-max: 720px; --page-pad: var(--gutter); --aside-w: 340px; }
@media (min-width: 768px) { :root { --nav-w: 80px; --page-max: 760px; --page-pad: var(--sp-4); } }
@media (min-width: 1200px) {
  :root {
    --nav-w: 248px; --page-max: 1080px; --page-pad: var(--sp-5);
    /* 桌面密度：字号整体收一档，接近 Linear / Notion 的信息密度 */
    --fs-display: 28px; --lh-display: 36px;
    --fs-title: 20px; --lh-title: 28px;
    --fs-head: 15px; --lh-head: 22px;
    --fs-body: 15px; --lh-body: 24px;
    --fs-sub: 13px; --lh-sub: 20px;
    --fs-hero: 64px; --lh-hero: 60px;
  }
}
@media (min-width: 1600px) { :root { --nav-w: 264px; --page-max: 1280px; --aside-w: 380px; } }

/* Windows 渲染模拟（?sim=win）：mac 上没有微软雅黑，用自托管 Noto Sans SC 代替系统苹方，检查非苹方字体下的度量和换行 */
:root[data-sim="win"], :root[data-cjk="noto"] { --font-cjk: "XG Noto SC", "Microsoft YaHei UI", "Microsoft YaHei"; }