/* ============================================================
OpenAI.com Design DNA — tokens.css
来源：openai.com 22 个页面实测 CSS 自定义属性（140 条）+ 像素色板
对应数据：../dna/openai-dna.json（站级）、../dna/pages/*.json（逐页）
用法： 然后
注意：OpenAI Sans 为 OpenAI 自有字体，需自行获得授权；下面 fallback
栈在无该字体时仍保持字阶/字距/行高关系。
============================================================ */
:root {
/* ---------- 1. 色彩：单色系统 + 一个强调色 ---------- */
--bg: #ffffff;
--fg: #000000;
--fg-60: rgba(0, 0, 0, 0.6); /* 次级文字：说明、日期、meta */
--fg-44: rgba(0, 0, 0, 0.44); /* 三级文字：极弱提示 */
--surface: #f1f1f1; /* = rgba(0,0,0,.04) 叠白底：卡片/chips/输入框 */
--card: #f8f8f5; /* 暖白卡面 --card */
--line: rgba(0, 0, 0, 0.12); /* 1px 发丝线：唯一边框强度 */
--accent: #0285ff; /* 沿用 OAI DNA 原值 --factory-accent，仅用于链接/focus 等极少量强调 */
--success: #80cd00;
--warning: #edb200;
--error: #e40014;
/* 中性阶（浅 → 深） */
--n-0: #ffffff;
--n-1: #f9f9f9;
--n-2: #f8f8f5;
--n-3: #f3f3f3;
--n-4: #f1f1f1;
--n-5: #ededed;
--n-6: #dedede;
--n-7: #cccccc;
--n-8: #bbbbbb;
--n-9: #8f8f8f;
--n-10: #626262;
--n-11: #444444;
--n-12: #1f1f1f;
--n-13: #111111;
--n-14: #000000;
/* ---------- 2. 字体与字阶 ----------
规律：标题全 500 且负字距（越大越紧）；正文 400 / lh 1.647；
字号在 375→1440 之间用 clamp() 连续插值，不做断点跳变。 */
--font-sans: "OpenAI Sans", "OpenAI Sans TC", "OpenAI Sans Variable Scripts",
-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "SF Mono", Consolas, "Liberation Mono", ui-monospace, monospace;
--type-xl-size: clamp(4rem, calc(4rem + 3 * ((100vw - 23.4375rem) / 66.5625)), 7rem);
--type-xl-line: clamp(4rem, calc(4rem + 3 * ((100vw - 23.4375rem) / 66.5625)), 7rem);
--type-xl-track: -0.02em;
--type-h1-size: clamp(2rem, calc(2rem + 2 * ((100vw - 23.4375rem) / 66.5625)), 4rem);
/* 原始英文实测 lh 1.0（64/64）；中文行框需要余量，故留 1.05，英文项目可改回 1.0 */
--type-h1-line: calc(var(--type-h1-size) * 1.05);
--type-h1-track: -0.03em; /* 实测 64px 时 -1.92px */
--type-h2-size: clamp(2rem, calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3rem);
--type-h2-line: calc(var(--type-h2-size) * 1.16); /* 实测 48 → 55.68px */
--type-h2-track: -0.02em;
--type-h2-5-size: clamp(1.5rem, calc(1.5rem + .88 * ((100vw - 23.4375rem) / 66.5625)), 2.38rem);
--type-h2-5-line: calc(var(--type-h2-5-size) * 1.2);
--type-h2-5-track: -0.02em;
--type-h3-size: clamp(1.5rem, calc(1.5rem + .375 * ((100vw - 23.4375rem) / 66.5625)), 1.875rem);
--type-h3-line: clamp(1.98rem, calc(1.98rem + .495 * ((100vw - 23.4375rem) / 66.5625)), 2.475rem); /* 1.32 */
--type-h3-track: -0.01em;
--type-h4-size: clamp(1.25rem, calc(1.25rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.375rem);
--type-h4-line: clamp(1.575rem, calc(1.575rem + .1575 * ((100vw - 23.4375rem) / 66.5625)), 1.7325rem); /* 1.26 */
--type-h4-track: -0.01em;
--type-h5-size: clamp(1rem, calc(1rem + .125 * ((100vw - 23.4375rem) / 66.5625)), 1.125rem);
--type-h5-line: clamp(1.32rem, calc(1.32rem + .165 * ((100vw - 23.4375rem) / 66.5625)), 1.485rem); /* 1.32 */
--type-h5-track: -0.01em;
--type-p1-size: 1.0625rem; /* 17px 全站正文 */
--type-p1-line: 1.74994rem; /* 28px / 1.647 */
--type-p1-track: -0.01em;
--type-p2-size: 0.875rem; /* 14px 卡片说明 */
--type-p2-line: 1.435rem;
--type-p2-track: -0.01em;
--type-meta-size: 0.875rem; /* 14px / 500 */
--type-meta-line: 1.225rem;
--type-nav-size: 0.875rem; /* 14px / 500 顶栏 */
--type-nav-line: 1.435rem;
--type-nav-header-size: 0.8125rem; /* 13px / 500 overline */
--type-nav-header-line: 1.23rem;
--type-code-size: 0.8125rem;
/* ---------- 3. 间距：4px 基准 ---------- */
--spacing: 0.25rem;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
--space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;
--space-40: 160px; --space-48: 192px;
--section-y: clamp(96px, 8vw, 160px); /* 章节间距 96–160 */
--section-y-tight: clamp(48px, 4vw, 64px);
/* ---------- 4. 布局 ---------- */
--container: 90rem; /* 1440px */
--gutter: 32px; /* --container-inline-gutter = spacing*8 */
--grid-gap: 24px;
--measure: 596px; /* 正文栏：60–75 字符/行 */
--media-max: 1000px;
--nav-h: 64px;
--page-top-gap: 48px;
/* 断点：375 / 768 / 1024 / 1440（字阶连续插值，无需跳变） */
/* ---------- 5. 形状：6.08px 是签名 ---------- */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6.08px; /* 卡片/图片/视频/代码块 —— 全站主力 */
--radius-lg: 16px;
--radius-xl: 32px;
--radius-full: 9999px;
/* ---------- 6. 层次：默认无阴影 ---------- */
--shadow-low: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.08);
--shadow-high: 0 24px 60px rgba(0, 0, 0, 0.12); /* 仅浮层/表单卡 */
/* ---------- 7. 动效：minimal functional ---------- */
--ease-primary: cubic-bezier(0.22, 1, 0.36, 1); /* 快出慢收，主曲线 */
--ease-primary-alt: cubic-bezier(0.17, 0.17, 0.3, 1);
--ease-spring: cubic-bezier(0.5, 1.25, 0, 1); /* 轻微回弹，慎用 */
--dur-fast: 0.1s;
--dur-short: 0.2s;
--dur-medium: 0.3s;
--dur-long: 0.4s;
--dur-macro: 0.6s;
}
/* 语义化排版工具类 */
.t-xl { font-size: var(--type-xl-size); line-height: var(--type-xl-line); letter-spacing: var(--type-xl-track); }
.t-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-track); }
.t-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-track); }
.t-h2-5 { font-size: var(--type-h2-5-size); line-height: var(--type-h2-5-line); letter-spacing: var(--type-h2-5-track); }
.t-h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); }
.t-h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); }
.t-h5 { font-size: var(--type-h5-size); line-height: var(--type-h5-line); letter-spacing: var(--type-h5-track); }
.t-p1 { font-size: var(--type-p1-size); line-height: var(--type-p1-line); letter-spacing: var(--type-p1-track); }
.t-p2 { font-size: var(--type-p2-size); line-height: var(--type-p2-line); letter-spacing: var(--type-p2-track); }
.t-meta { font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.t-overline { font-size: var(--type-nav-header-size); line-height: var(--type-nav-header-line); letter-spacing: 0; }
.t-code { font-family: var(--font-mono); font-size: var(--type-code-size); }