/* Unveil 设计系统核心 · 单一真源
 *
 * 规则：页面样式表只允许引用 var()，不得再出现字面色值、字号或间距数字。
 * 审计前：6 个样式表、77 个硬编码色值、两套互相漂移的近似调色板。
 *
 * 多语言：所有排版量按语种生效（:lang），不预设中文。译文普遍比中文长
 * 30–40%，因此此文件不提供任何固定高度或固定宽度的容器量。
 */

:root {
  color-scheme: light dark;

  /* 中性阶 · 暖纸基调，统一自原 style.css 与 game-studies.css 的两套漂移值 */
  --u-paper: #f7f6f2;         /* 页面底 */
  --u-surface: #fffdf8;       /* 卡片、浮层 */
  --u-sunk: #eeede6;          /* 内陷区：引文、代码、未展开的证据 */
  --u-line: #dcded5;          /* 常规分隔 */
  --u-line-strong: #c3cebd;   /* 需要被看见的边界 */

  --u-ink: #252d2a;           /* 正文 · 13.1:1 */
  --u-ink-muted: #5d6a61;     /* 次要说明 · 5.3:1 */
  --u-ink-faint: #656f67;     /* 标注、出处 · 4.8:1，仍可读，不用于装饰 */

  /* 唯一品牌强调色。全站不得出现第二个强调色相。 */
  --u-accent: #36654a;        /* 6.2:1 */
  --u-accent-hover: #2b5440;
  --u-accent-tint: #e6ece6;
  --u-on-accent: #ffffff;     /* 置于 accent 之上 · 6.7:1 */

  /* 证据语义色：承载数据含义（关系类型），不是装饰，不可挪作他用。
   * 颜色不单独承载信息——每处都另有文字或线型标记，色觉差异者不丢信息。 */
  --u-critique: #a04a2c;      /* 明确批评 · 5.5:1 */
  --u-conjecture: #7d6234;    /* AI 对读 / 未核实 · 5.3:1 */
  --u-verified: var(--u-accent);

  /* 字族。零依赖，只用系统字体：CJK 不下发网络字体（动辄数 MB）。
   * 栈序为「拉丁在前、CJK 在后」：拉丁字形走衬线，汉字落到后面声明的黑体。
   * 原缺陷是全栈未声明任何 CJK 字面，汉字在各系统上回退结果不一致。 */
  --u-font-serif: "Iowan Old Style", Charter, "Source Serif 4", Palatino, Georgia,
    "Songti SC", "Noto Serif CJK SC", serif;
  --u-font-sans: ui-sans-serif, "Inter", "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC",
    "Microsoft YaHei", sans-serif;
  --u-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* 字号阶 · 1.200 小三度，正文 16px 起。全部 rem，随用户字号设置缩放。 */
  --u-text-2xs: 0.694rem;
  --u-text-xs: 0.833rem;
  --u-text-sm: 0.909rem;
  --u-text-base: 1rem;
  --u-text-lg: 1.2rem;
  --u-text-xl: 1.44rem;
  --u-text-2xl: 1.728rem;
  --u-text-3xl: 2.074rem;
  --u-text-display: clamp(2.074rem, 1.6rem + 2.2vw, 2.986rem);

  /* 行高按语种在下方 :lang 区覆盖；此处为缺省。 */
  --u-leading-tight: 1.25;
  --u-leading-snug: 1.45;
  --u-leading-body: 1.7;

  /* 可读行长。CJK 按字框计（em），拉丁按字符计（ch）；两者不可混用一个值。 */
  --u-measure: 38em;
  --u-measure-narrow: 30em;

  /* 间距阶 · 4px 基准 */
  --u-space-1: 0.25rem;
  --u-space-2: 0.5rem;
  --u-space-3: 0.75rem;
  --u-space-4: 1rem;
  --u-space-5: 1.5rem;
  --u-space-6: 2rem;
  --u-space-7: 3rem;
  --u-space-8: 4rem;
  --u-space-9: 6rem;

  /* 形状 · 单一圆角体系：卡片与浮层 10px，控件 8px，标记 999px。不混用。 */
  --u-radius-flush: 0;        /* 贴边元素：满高侧栏、通栏，无圆角仍属体系内 */
  --u-radius-surface: 10px;
  --u-radius-control: 8px;
  --u-radius-pill: 999px;

  /* 投影染底色相，不用纯黑 */
  --u-shadow-raised: 0 1px 2px rgb(37 45 42 / 0.06), 0 2px 8px rgb(37 45 42 / 0.05);
  --u-shadow-overlay: 0 4px 12px rgb(37 45 42 / 0.1), 0 12px 32px rgb(37 45 42 / 0.09);

  /* 动效 · 本站是阅读工具，动画只用于状态变化、展开与焦点反馈，
   * 不做滚动编排、不做无限循环。每条动画都应能一句话说清它在传达什么。 */
  --u-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --u-dur-instant: 90ms;
  --u-dur-state: 160ms;
  --u-dur-reveal: 240ms;

  /* 焦点环 · 键盘可达性，不随组件改写 */
  --u-focus-ring: 2px solid var(--u-accent);
  --u-focus-offset: 2px;

  /* 层级 · 只有这四层，不得出现任意 z-index */
  --u-z-base: 0;
  --u-z-raised: 10;
  --u-z-sticky: 20;
  --u-z-overlay: 30;
}

/* 深色模式 · 长时间阅读的实际需求，不是附赠。
 * 不用纯黑，保留暖灰基调，强调色提亮以维持与浅色一致的层级关系。 */
@media (prefers-color-scheme: dark) {
  :root {
    --u-paper: #171a18;
    --u-surface: #1f2320;
    --u-sunk: #141715;
    --u-line: #333a35;
    --u-line-strong: #4a534c;

    --u-ink: #e8e9e4;         /* 14.4:1 */
    --u-ink-muted: #a7b0a8;   /* 7.9:1 */
    --u-ink-faint: #8a948c;   /* 5.6:1 */

    --u-accent: #8fc0a0;      /* 8.5:1 */
    --u-accent-hover: #a8d2b6;
    --u-accent-tint: #23302a;
    --u-on-accent: #10140f;   /* 深底字置于亮绿之上 */

    --u-critique: #e09a76;    /* 7.6:1 */
    --u-conjecture: #cfae72;  /* 8.3:1 */

    --u-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.24);
    --u-shadow-overlay: 0 4px 12px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.36);
  }
}

/* 按语种调排版。切换语言时只需改 <html lang>，不改组件。 */
:root:lang(zh),
:root:lang(zh-CN),
:root:lang(zh-Hans) {
  --u-leading-body: 1.8;      /* 汉字字面满，需要更多行距才透气 */
  --u-leading-snug: 1.55;
  --u-leading-tight: 1.35;    /* 中文标题不能压到 1.1，会贴字 */
  --u-measure: 36em;
  --u-measure-narrow: 28em;
}

:root:lang(en) {
  --u-leading-body: 1.65;
  --u-leading-snug: 1.4;
  --u-leading-tight: 1.15;
  --u-measure: 68ch;          /* 拉丁按字符数算行长 */
  --u-measure-narrow: 52ch;
}

/* CJK 排版细节：标点挤压与全角空白处理。渐进增强，不支持则无副作用。 */
:lang(zh) {
  text-spacing-trim: trim-start;
  font-variant-east-asian: proportional-width;
}

/* 中文没有真正的斜体，浏览器会做伪斜体（机械倾斜），很难看。
 * 强调一律用字重或颜色，不用 italic。 */
:lang(zh) em,
:lang(zh) i,
:lang(zh) cite {
  font-style: normal;
  font-weight: 600;
}

/* 字间距只给拉丁大写标签用；给汉字加 letter-spacing 会破坏字距节奏。 */
.u-label {
  font-size: var(--u-text-2xs);
  font-weight: 600;
  color: var(--u-ink-faint);
}

.u-label:lang(en) {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* 多语言安全栅格：按内容最小宽度换行，不按固定列数。
 * 译文变长时自动减列，不会把文字压成截断或溢出。 */
.u-grid {
  display: grid;
  gap: var(--u-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  align-items: start;        /* 卡片按各自内容高度，不拉伸对齐 */
}

/* 任何承载译文的容器都不得设固定高度。这条是上一轮卡片被裁切一半的直接成因。 */
.u-card {
  display: flex;
  flex-direction: column;
  gap: var(--u-space-3);
  padding: var(--u-space-5);
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-surface);
  block-size: auto;
  overflow: visible;
}

/* 可操作性由控件形态表达，不由色相表达。
 * 原设计用蓝色标「可点」、灰色标「只读」——色相单独承载信息对色觉差异者失效，
 * 且在绿色品牌站里引入第二个强调色相。改为：填充/描边/下划线承担这个区分。 */
.u-action {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-2);
  padding: var(--u-space-2) var(--u-space-4);
  border: 1px solid var(--u-accent);
  border-radius: var(--u-radius-control);
  background: transparent;
  color: var(--u-accent);
  cursor: pointer;
  text-align: start;
  inline-size: auto;
  white-space: normal;       /* 长译文换行，不溢出 */
  transition: background var(--u-dur-state) var(--u-ease),
    color var(--u-dur-state) var(--u-ease),
    transform var(--u-dur-instant) var(--u-ease);
}

.u-action:hover {
  background: var(--u-accent-tint);
}

.u-action:active {
  transform: translateY(1px);  /* 按下的物理反馈 */
}

.u-action--primary {
  background: var(--u-accent);
  color: var(--u-on-accent);
}

.u-action--primary:hover {
  background: var(--u-accent-hover);
}

/* 只读说明不是按钮，不给边框与指针 */
.u-note {
  color: var(--u-ink-muted);
  font-size: var(--u-text-sm);
  line-height: var(--u-leading-snug);
}

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--u-focus-ring);
  outline-offset: var(--u-focus-offset);
  border-radius: var(--u-radius-control);
}

/* 动效降级。本站动效档位本就低，降级后应完全静止而非变快。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --u-dur-instant: 0ms;
    --u-dur-state: 0ms;
    --u-dur-reveal: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}