/* ============================================================================
 * tokens.css · C02-R1 设计 token
 *
 * 全部取自 Penpot `H5 五屏 UI` 的图层实测（不是目测）：
 *   · 颜色 = 形状 fills / strokes 的原值
 *   · 渐变 = 导出 SVG 里 <linearGradient> 的 x1/y1/x2/y2（判断方向）
 *   · 阴影 = shadows[] 的 offset/blur/spread/color+opacity
 *   · 字号 = 文本图层的 fontSize / lineHeight / letterSpacing
 *
 * 尺寸一律按设计画板的 **390 × 844.5** 坐标系写（用 var(--dw) 换算成 % 的地方另注）。
 * ========================================================================== */

:root {
  /* ---- 画板基准 ------------------------------------------------------ */
  --dw: 390;          /* 设计画板宽 */
  --dh: 844.5;        /* 设计画板高 */

  /* ---- 安全区 -------------------------------------------------------
   * `env()` 在桌面浏览器恒为 0，所以额外允许被 `--sat-override/--sab-override`
   * 覆盖 —— 仅供自动化验收注入（`?safeTop=47&safeBottom=34`），生产永不走这条。
   * ------------------------------------------------------------------ */
  --safe-top: var(--sat-override, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--sab-override, env(safe-area-inset-bottom, 0px));

  /* ---- 品牌色（Penpot swatch + 图层 fills） ---------------------------- */
  --brand:        #436abd;   /* 主蓝 */
  --brand-ink:    #032a8e;   /* CTA 渐变深端 */
  --brand-hi:     #9cbdfa;   /* CTA 渐变浅端 */
  --brand-deep:   #001447;
  --brand-soft:   #b2d4ff;
  --brand-mid:    #779be1;

  --ink:          #000000;
  --ink-invert:   #ffffff;

  /* P4 视频位内的进度条 */
  --track:        rgba(0, 0, 0, 0.2);

  /* ---- 系列 / 版本色 -------------------------------------------------- */
  --series-pofeng:      #e1e7f3;
  --series-cuihuo:      #f33900;
  --series-cuihuo-soft: #ffb49d;
  --series-cuihuo-deep: #b77165;

  /* 结果卡片：BLUE / RED 两套，由 [data-variant] 切换 */
  --card-paper-a: #f5f7fb;
  --card-paper-b: #c3cce9;
  --card-ink:     #211815;

  /* 禁用态（P2 未选中 / P3 未填完）—— 取自设计里唯一的禁用按钮 */
  --disabled-bg:  #dfe4f0;
  --disabled-ink: #a6adc4;

  /* ---- 排版 ---------------------------------------------------------- */
  --font: 'OPPOSans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;

  --fs-hero:    27px;   /* 上传头像 */
  --fs-sub:     22px;   /* 解锁「风头正劲」的你 */
  --fs-cta:     20px;   /* 所有主 CTA */
  --fs-body:    16px;   /* 结果页页脚三行 / 屏4 文案 */
  --fs-field:   15px;   /* 昵称输入 */
  --fs-dz:      14.5px; /* 点击上传 / 拍照 */
  --fs-pill:    13px;   /* 返回 / 回到主页 */
  --fs-quota:   11.5px;
  --fs-card-nick: 10.89px; /* 卡片昵称（设计原值，未取整） */
  --fs-tag:     10.5px;
  --fs-note:     8px;

  --ls-cover: 6px;      /* 「解锁「风头正劲」的你」的字距 */
  --ls-btn:   0.04px;

  /* ---- 形状 ---------------------------------------------------------- */
  --r-btn:  4px;
  --r-pill: 17px;

  /* ---- 阴影（直接从 shadows[] 抄，颜色是 re-query Penpot 拿到的真值）----
   * ★ 一个反直觉但确实如此的事实：CTA 的投影是**白色 36%**（不是蓝的）。
   *   蓝底 + 白晕 = 设计稿里那种「发亮的按钮」；如果按直觉写成蓝色投影，
   *   按钮会变成一块压下去的深色块 —— 这是照抄数值与凭感觉调的差别。
   * -------------------------------------------------------------------- */
  --sh-cta:  0 22px 46px rgba(255, 255, 255, 0.36);
  --sh-card: 0 22px 46px rgba(0, 0, 0, 0.2);
  --sh-inner: inset 0 0 10px 4px rgba(255, 255, 255, 0.5);

  /* ---- 动效 ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-enter: 0.62s;   /* 屏内元素入场 */
  --t-screen: 0.42s;  /* 屏与屏之间 */
}