/* ==========================================================================
   tokens.css — 设计令牌，全站唯一来源
   改这里就够，别在组件里写死颜色和宽度。
   ========================================================================== */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/baloo2-800-latin.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrainsmono-400-latin.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;
}

:root {
  /* ---- 品牌色 · 填充 ----------------------------------------------------
     只做背景和实心块。考核标准是「白字压得住吗」。 */
  --brand: #1b2ae8;
  --brand-hover: #1420c4;
  --brand-500: #3fa9f5;
  --brand-surface: #e8f1ff;
  --brand-surface-2: #e3edff;

  /* ---- 品牌色 · 文字 ----------------------------------------------------
     只做浅底上的链接与强调。考核标准是「压在纸底上读得清吗」。
     和 --brand 同值但**必须分开**：将来任一边调色，不会误伤另一边。 */
  --brand-ink: #1b2ae8;

  /* ---- 品牌色 · 图形 ----------------------------------------------------
     只做圆点、图标描边、深底上的小标题，>=3.0 即可。 */
  --brand-mark: #6cb4fc;

  /* ---- 点缀：只做品牌标记，绝不大面积使用 ------------------------------ */
  --accent: #e8384a;

  /* ---- 浅色底上的三级文字（全部 >= 4.5:1） ----------------------------- */
  --text: #0f1b33;          /* 标题            白底 16.5:1 */
  --text-body: #45526b;     /* 正文与段落      白底  7.9:1 */
  --text-muted: #5a6b85;    /* 次级描述        白底  5.4:1 */
  --text-faint: #64728a;    /* 元信息小字      白底  4.9:1  纸底 4.6:1 */

  /* ---- 深色底上的三级文字 ----------------------------------------------
     基准面取「全站最深的那块底」= .field（--deep-card 上叠 5% 白）。
     每一档都必须在这里单独达标 —— 最暗一档也不能低于 AA 4.5:1，
     因为它就是拿来写小字的（11.5px 的字段标签）。 */
  --text-invert: #ffffff;         /* 标题        13.5:1 */
  --text-invert-body: #9fb3d1;    /* 正文         6.3:1 */
  --text-invert-muted: #8fa3c4;   /* 次级描述     5.3:1 */
  --text-invert-faint: #8c9dbd;   /* 元信息小字   4.9:1 */

  /* ---- 底色与描边 ------------------------------------------------------- */
  --paper: #f5f9ff;
  --card: #ffffff;
  --line: #e1eaf7;
  --line-strong: #d8e3f2;
  --deep: #0f1b33;
  --deep-card: #16233f;
  --deep-line: #22314f;
  --footer: #0d1730;

  /* ---- 字体 -------------------------------------------------------------
     中文一律走系统字体栈：零请求、渲染最快，且各平台字形都是本地的。
     自托管的只有两个拉丁子集（38KB），用于字标、版本号与代码片段。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-brand: "Baloo 2", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas,
    "Courier New", monospace;

  /* ---- 字号 ------------------------------------------------------------- */
  --fs-display: 62px;   /* 首页 Hero 主标题 */
  --fs-lead: 44px;      /* 内页页头 */
  --fs-h2: 40px;        /* 区块标题 */
  --fs-h3: 36px;        /* 区块标题（次级） */
  --fs-h4: 22px;        /* 分组标题 */
  --fs-h5: 20px;        /* 卡片标题（大） */
  --fs-h6: 18px;        /* 卡片标题（中） */
  --fs-lg: 17px;        /* 导语 */
  --fs-md: 16px;        /* 正文 / 按钮 */
  --fs-sm: 15px;        /* 导航 / 小标题 */
  --fs-xs: 13.5px;      /* 卡片描述 */
  --fs-2xs: 13px;       /* 元信息 */
  --fs-3xs: 12.5px;     /* 标签 / 注脚 */
  --fs-4xs: 11px;       /* 最小注脚 */

  /* ---- 行高（中文正文要留足，1.7 是下限） ------------------------------- */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ---- 间距：8 的倍数，别随手写 14 / 26 --------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 52px;
  --sp-10: 64px;
  --sp-11: 76px;
  --sp-12: 96px;

  /* ---- 圆角 ------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- 宽度：全站只有这两档，第三档一律视为缺陷 ------------------------ */
  --w-container: 1200px;  /* 所有区块、卡片、栅格 */
  --w-prose: 820px;       /* 所有长文与导语 */

  /* ---- 阴影：只用两级，别造第三种 --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 27, 51, 0.06),
    0 1px 3px rgba(15, 27, 51, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 27, 51, 0.08),
    0 2px 6px rgba(15, 27, 51, 0.04);

  /* ---- 动效 ------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.18s;
}

/* 字号在窄屏整体降一档。只改这里，全站跟着走。 */
@media (max-width: 900px) {
  :root {
    --fs-display: 40px;
    --fs-lead: 32px;
    --fs-h2: 30px;
    --fs-h3: 27px;
    --fs-h4: 20px;
    --fs-lg: 16px;
    --sp-12: 64px;
    --sp-11: 56px;
  }
}

@media (max-width: 560px) {
  :root {
    --fs-display: 33px;
    --fs-lead: 27px;
    --fs-h2: 26px;
    --fs-h3: 24px;
    --fs-h5: 18px;
    --sp-12: 52px;
    --sp-11: 44px;
  }
}