/* ============================================================
   tokens.css — 设计令牌层（唯一真相）
   字号 / 比例 / 编号 / 时长 / 间距 / 断点
   ------------------------------------------------------------
   设计原则：
   1. 超大字用 min(vw, svh) 双约束 —— clamp 的 min 是绝对下界，
      320px 屏上会强撑到 67px 必然溢出；min() 让字号随视口线性
      收缩，无断点也连续，且 svh 项解决移动端地址栏收放导致的
      满屏区块高度裁切。
   2. 语义令牌优先：组件引用 --fs-title / --num-* / --ratio-*，
      不在组件里写 clamp()。
   ============================================================ */

:root{
  /* ---------- 色板 ---------- */
  --bg:#0a0a0b;
  --bg-2:#111113;
  --bg-3:#17171a;
  --bg-deep:#070708;
  --bg-veil:#0c0c0e;

  --fg:#ece9e2;
  --fg-dim:rgba(236,233,226,.62);      /* 对比度 6.56:1 — 正文级 */
  --fg-faint:rgba(236,233,226,.66);    /* 对比度 7.4:1 — 小字/图注/元信息 */
  --fg-deco:rgba(236,233,226,.42);     /* 仅供纯装饰：分隔符/引号/描边。禁止用于文本节点 */
  --fg-hair:rgba(236,233,226,.14);

  --line:rgba(236,233,226,.14);
  --line-soft:rgba(236,233,226,.08);
  --stroke-faint:rgba(236,233,226,.4);
  --stroke-deco:rgba(236,233,226,.16);

  /* 强调色：默认 amber；详情页由 body[data-series] 覆盖 */
  --amber:#e6b264;
  --amber-hi:#f4d9a6;
  --violet:#9a8fff;
  --violet-hi:#c2bbff;
  --red:#d6493b;
  --red-hi:#f07a6c;
  --accent:var(--amber);
  --accent-hi:var(--amber-hi);

  /* ---------- 字体族 ----------
     回退链说明：中文标题字 ZCOOLXiaoWei 本身不含 · ′ ″ ← → ①②③ 等符号，
     若直接使用会出现 .notdef 豆腐块。fonts.css 已把这些码位从它的
     unicode-range 中剔除，因此这里的第二顺位必须是具备这些符号的
     Noto Sans SC，浏览器才会正确回退。不要把它删掉或后移。 */
  --f-disp:"XiaoWei","Noto Sans SC Var","Noto Serif SC","Songti SC",serif;
  --f-fr:"Fraunces Var",Georgia,"Noto Sans SC Var",serif;
  --f-sans:"Noto Sans SC Var","PingFang SC","Microsoft YaHei",sans-serif;
  --f-gro:"Space Grotesk Var","Noto Sans SC Var",sans-serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  /* ---------- 字号 ----------
     min(vw, svh) 双约束：横向随宽收缩，纵向随高收缩，
     两轴都封顶，320px 屏不再溢出。 */
  --fs-mega:clamp(2.6rem, min(17vw, 26svh), 15.5rem);    /* Hero 主名 */
  --fs-giant:clamp(2.2rem, min(11vw, 20svh), 10rem);
  --fs-h1:clamp(1.9rem, min(8.5vw, 16svh), 7.5rem);      /* 页级标题 */
  --fs-xhuge:clamp(3rem, min(19vw, 28svh), 17rem);       /* 宣言大字 */
  --fs-huge:clamp(3.4rem, min(24vw, 30svh), 22rem);      /* 视差巨字 */
  --fs-foot:clamp(2.4rem, min(13vw, 20svh), 12rem);      /* 页脚巨字 */
  --fs-display:clamp(1.8rem, min(9vw, 14svh), 8rem);     /* 下一系列 */

  --fs-title:clamp(1.5rem, min(3.4vw, 5svh), 3rem);      /* 区块标题（统一） */
  --fs-h2:clamp(1.5rem, min(5.2vw, 8svh), 4.4rem);
  --fs-h3:clamp(1.2rem, min(2.6vw, 4svh), 2.1rem);
  --fs-quote:clamp(1.5rem, min(5.4vw, 9svh), 4.6rem);
  --fs-lead:clamp(1rem, 1.55vw, 1.3rem);
  --fs-body:clamp(.94rem, 1.15vw, 1.02rem);
  --fs-small:clamp(.7rem, .9vw, .8rem);
  --fs-micro:clamp(.62rem, .78vw, .72rem);
  --fs-marquee:clamp(1.5rem, 5.5vw, 4.6rem);

  /* ---------- 图片比例（.figure[data-ratio] 映射） ---------- */
  --ratio-land:3/2;
  --ratio-portrait:3/4;
  --ratio-tall:4/5;
  --ratio-wide:16/9;
  --ratio-square:1/1;

  /* ---------- 编号 ---------- */
  --num-font:var(--f-fr);
  --num-style:italic;
  --num-weight:200;
  --num-stroke:1px;

  /* ---------- 时长与缓动 ---------- */
  --dur-enter:1.1s;
  --dur-fast:.45s;
  --dur-swap:.6s;
  --dur-slow:1.4s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-exp:cubic-bezier(.87,0,.13,1);

  /* ---------- 尺寸 ---------- */
  --pad:clamp(1.15rem, 4vw, 4.5rem);
  --wrap:1560px;
  --nav-h:72px;
  --nav-h-m:56px;
  --tap-min:44px;

  /* ---------- 层级 ---------- */
  --z-bg:1;
  --z-gl:2;
  --z-main:3;
  --z-chrome:4;
  --z-noise:70;
  --z-menu:90;
  --z-nav:100;
  --z-cursor:200;
  --z-lightbox:250;
  --z-wipe:280;
  --z-preloader:300;
}

/* ---------- 系列主题：激活 --accent ---------- */
body[data-series="virtual"]{ --accent:var(--violet); --accent-hi:var(--violet-hi) }
body[data-series="color"]  { --accent:var(--red);    --accent-hi:var(--red-hi) }
/* campus / street / youth / earth / all → 默认 amber */

/* ============================================================
   断点覆盖
   360 / 480 / 768 / 1024 / 1440
   ============================================================ */

/* ---------- ≤1440：栅格封顶 ---------- */
@media (max-width:1440px){
  :root{ --wrap:1240px }
}

/* ---------- ≤1024：双列 ---------- */
@media (max-width:1024px){
  :root{ --wrap:1000px }
}

/* ---------- ≤768：单列改写（吸收原 900px 断点） ---------- */
@media (max-width:768px){
  :root{
    --nav-h:var(--nav-h-m);
    --pad:clamp(1.1rem, 5vw, 2rem);
    --fs-title:clamp(1.4rem, 5.4vw, 2rem);
    --fs-h2:clamp(1.6rem, 7.5vw, 2.6rem);
    --fs-h3:clamp(1.15rem, 4.6vw, 1.5rem);
    /* ---------- 移动端可读性下限 ----------
       触屏观看距离比桌面更近，但环境光更差、抖动更多，
       字号不能沿用桌面的 9–10px 微字。基准取 12px：
       低于 12px 的拉丁字母在 1x 屏上会开始糊成一团。
       小字下限 11.5px 是「不放大也能读」的临界值，
       元信息类（--fs-micro）在这里统一托底。 */
    --fs-micro:11.5px;
    --fs-small:12px;
    --fs-body:1rem;
    /* 触控目标同步放大 */
    --tap-min:48px;
  }
}

/* ---------- ≤480：小屏兜底 ---------- */
@media (max-width:480px){
  :root{
    --fs-micro:11.5px;
    --fs-small:12px;
    --fs-mega:clamp(2.3rem, 19vw, 4.2rem);
    --fs-giant:clamp(2rem, 13vw, 3.4rem);
    --fs-h1:clamp(1.75rem, 11vw, 3rem);
    --fs-xhuge:clamp(2.6rem, 21vw, 5.4rem);
    --fs-huge:clamp(2.8rem, 26vw, 6rem);
    --fs-foot:clamp(2.1rem, 15vw, 4.4rem);
    --fs-display:clamp(1.6rem, 11vw, 3.2rem);
    --fs-quote:clamp(1.3rem, 7vw, 2.2rem);
    --fs-marquee:clamp(1.25rem, 8vw, 2rem);
  }
}

/* ---------- ≤360：极窄兜底 ---------- */
@media (max-width:360px){
  :root{
    --pad:1rem;
    --fs-mega:clamp(2rem, 18vw, 3.2rem);
    --fs-xhuge:clamp(2.3rem, 20vw, 3.6rem);
  }
}