/* ============================================================
   乒乓世界 · 设计系统（Design Tokens）
   ------------------------------------------------------------
   全站共用的设计变量 + 基础重置。改这里 = 全站换肤。

   风格基调：深色科技风，首页参考 rockstargames.com
   · 近黑背景分三层，避免死黑导致的廉价感
   · 主色取乒乓球的橙，兼作品牌色（R 星官网同样是橙）
   · 青色作科技感辅助色，专门用于数据高亮
   · v2（2026-10-16）：R 星式深化 —— 大字报标题（Archivo 900）、
     切角元素（.clip-corner）、圆角收紧；设计计划见
     docs/设计计划-前端重构-20261016.md
   ============================================================ */

/* ------------------------------------------------------------
   字体自托管：Archivo（英文/数字 display，latin 子集共 28KB）
   ------------------------------------------------------------
   ⚠️ 不走 CDN —— 国内 jsdelivr / Google Fonts 均不稳定；
      字体文件在本仓库 web/assets/fonts/ 内，随部署一起走。
   ------------------------------------------------------------ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-900.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-700.woff2") format("woff2");
}

:root {
  /* ---------- 背景分层：数字越大越亮 ----------
     2026-10-31：整体从近黑提亮为「微蓝深灰」，
     长时间阅读眼睛不容易累（原 #08080a 纯黑对比过强）。 */
  --bg-0: #0b0f17; /* 页面底色 */
  --bg-1: #121a29; /* 卡片 */
  --bg-2: #19223a; /* 悬浮态 */
  --bg-3: #232e49; /* 强调块 */

  /* ---------- 描边 ---------- */
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);

  /* ---------- 品牌色 ---------- */
  --brand: #ff5c1a;
  --brand-hot: #ff7a3d; /* hover 亮橙（v2 新增） */
  --brand-soft: rgba(255, 92, 26, 0.14);
  --brand-glow: rgba(255, 92, 26, 0.45);

  /* ---------- 辅助色（数据高亮） ---------- */
  --accent: #00e0c6;
  --accent-soft: rgba(0, 224, 198, 0.14);

  /* ---------- 文字层级 ---------- */
  --text-0: #eef2fb; /* 主文字 */
  --text-1: #a8b3c9; /* 次要 */
  --text-2: #6f7c96; /* 弱化 */

  /* ---------- 字体 ---------- */
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
  /* 英文/数字 display（Archivo 900）—— 大字报标题、概览大数字用 */
  --font-display: "Archivo", "Segoe UI", "PingFang SC", "Microsoft YaHei",
    sans-serif;

  /* ---------- 间距阶梯 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---------- 圆角（v2 收紧：直角为主，大圆角只留给胶囊元素） ---------- */
  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-clip: 18px; /* 切角尺寸（.clip-corner 用） */

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.35s;

  /* ---------- 布局 ---------- */
  --page-max: 1280px;
  --nav-h: 68px;
}

/* ============================================================
   基础重置
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 锚点跳转平滑；同时给滚动驱动的动画留出余量 */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ============================================================
   通用工具类
   ============================================================ */

/* 页面内容容器 */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* 小标签：全大写 + 宽字距，科技风的常见手法 */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}

/* 数字用等宽字体，避免跳动 */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 大字报：英文/数字 display 字体（Archivo 900）+ 收紧字距
   用于页面标题、概览大数字、组名 —— 中文部分自动回退系统黑体 */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* ============================================================
   切角元素（R 星式，v2 新增）
   ------------------------------------------------------------
   右上角斜切一刀，标记「可进入 / 有动作」的元素。
   ⚠️ clip-path 会裁掉 border 和 box-shadow —— 所以：
     · 切角元素用「背景色差」表达边界，不用 border
     · 斜切边的描边用 ::after 补一条线（::before 留给组件自己用）
   ============================================================ */
.clip-corner {
  position: relative;
  clip-path: polygon(
    0 0,
    calc(100% - var(--r-clip)) 0,
    100% var(--r-clip),
    100% 100%,
    0 100%
  );
}

.clip-corner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--r-clip);
  height: var(--r-clip);
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.7px),
    var(--line-strong) calc(50% - 0.7px),
    var(--line-strong) calc(50% + 0.7px),
    transparent calc(50% + 0.7px)
  );
  pointer-events: none;
}

/* 屏幕阅读器专用 */
.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;
}

/* 尊重系统的「减少动效」设置 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}