/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PixelOS 私有 token · Stage 1
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   命名公约:
   - 所有 PixelOS 专属 token 用 --p-* 前缀,避免跟全局语义 token(theme.css)冲突
   - 颜色一律走 rgba(var(--p-*-rgb), X) 形式,不裸写 hex/rgb
     (rgb 源全部在本文件内自持,不依赖外部旧 token)
   - 数值 token 必须 px 单位,JS 通过 getComputedStyle 读取

   Stage 1-5 演进预期:
   - Stage 1(本批):hero 屏波纹必需 token
   - Stage 2:capabilities 三步抽象循环新增 --p-cap-* token
   - Stage 3:generate 产物 + 闪烁新增 --p-gen-* token
   - Stage 4:静态屏 + 屏间过渡新增 --p-static-* + --p-trans-* token
   - Stage 5:暗黑模式启用 dark-token 双轨(本 spec 决议 Q4 不做暗黑,token 单轨)

   Critique 修过的关键决策(2026-06-09):
   - 8 档 alpha(--p-r1..r7)对应 hero.js className 切换 — 不用 @property
     (Safari 数值动画兼容性边角,且 className 已 spike 验证 iPhone 12 60fps)
   - cell-size 桌面/移动两档,JS cap 总 cells ≤ 2400(防 4K 屏 paint 爆)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /* ━━ PixelOS 配色(继承 home-v2 v2,整页浅色)━━
     用 --p-* 私有命名空间,跟 vars/light.css 的 --bg/--ink 隔离

     墨水颜色不固定:墨水是"绘制内容"的工具,各 scene 自己定颜色
     - Hero 抽象波纹:浅白高光(下面 8 档),像水面阳光晃动
     - Capabilities 三步(Stage 2):每步可能不同色,待 Stage 2 定义 --p-cap-* 8 档
     - Generate 产物(Stage 3):跟产物相关,待 Stage 3 定义 --p-gen-* 8 档 */
  --p-bg:           #BBD7D0;          /* 整页底色:浅青绿(home-v2 mosaic 底色同款) */
  --p-bg-soft:      #E6FAF4;          /* 缝线高光(SVG tile / 边缘装饰用) */
  --p-text:         #19282d;          /* 内容层文字色(H1 / 正文,深墨绿,在浅底上可读) */
  --p-text-rgb:     25, 40, 45;
  /* 深 stage(聆听/记录/生成/隐私/CTA)专用底色:比 --p-text 更深更干净的蓝黑(参考 Midnight #0D1216),
     洗掉原 #19282d 的「闷青」,让圆环/绿核/银卡等鲜艳/亮色弹得出来、不显脏 */
  --p-stage:        #0F151A;
  --p-stage-rgb:    15, 21, 26;
  /* stage2(capabilities)底色渐变:基准色 → 朝右下角更深一档(同色系只变深、不变色),衬主体的灰、不显脏 */
  --p-stage2:       #252931;          /* 基准色(冷调深岩灰)*/
  --p-stage2-rgb:   37, 41, 49;
  --p-stage2-deep:  #0e1217;          /* 渐变暗端:近黑(深邃 → 洗掉发灰,衬主体)*/
  --p-text-soft:    rgba(var(--p-text-rgb), 0.65);   /* 二级文字 */
  --p-accent:       #8BBC15;          /* 亮绿点缀(home-v2 同款,按钮 + 滚动词) */
  --p-accent-rgb:   139, 188, 21;
  --p-accent-hover: #7AA512;
  --p-light:        #FFFFFF;          /* 纯白:primary 按钮文字 + SVG 桥接源 */
  --p-light-rgb:    255, 255, 255;    /* 白 RGB 源:深底反白文字的 alpha 梯度用 */

  /* ━━ 网格几何(三层共享坐标系) ━━ */
  --p-cell-size:   10px;   /* 桌面 cell 边长;移动端 media query 覆盖 */
  --p-cell-gap:    1px;    /* cell 间留缝(OS 栅格甜区,0 像瓷砖 / 2 像点阵屏) */
  --p-cell-radius: 1.2px;  /* cell 圆角,抵消硬边,贴合 Braun 工业美学 */

  /* ━━ Hero 屏墨水 8 档(v2 修):用浅青绿 #BBD7D0 alpha 梯度,不是浅白高光 ━━
     在浅白底上 → 淡淡的青绿圆环,跟 home-v2 配色一脉相承
     "动画用底色"的视觉语义:波纹像底色"渗"出来的水波,不是叠加的高光 */
  --p-cell-rgb:  187, 215, 208;              /* 浅青绿 RGB 源:r1-r7 alpha 梯度共用(braun 红线 3:rgb 变量 + alpha 档)*/
  --p-cell-dim: rgba(var(--p-cell-rgb),0);      /* 底纹完全透明(开放式背景,不框死) */
  --p-r1:       rgba(var(--p-cell-rgb),0.25);   /* 圆环最外缘(刚开始显形) */
  --p-r2:       rgba(var(--p-cell-rgb),0.42);
  --p-r3:       rgba(var(--p-cell-rgb),0.58);
  --p-r4:       rgba(var(--p-cell-rgb),0.72);
  --p-r5:       rgba(var(--p-cell-rgb),0.84);
  --p-r6:       rgba(var(--p-cell-rgb),0.94);
  --p-r7:       rgba(var(--p-cell-rgb),1);      /* 多源叠加,纯 #BBD7D0 不透明 */

  /* 网格底纹色:不画(开放式,只波纹 cells 显形,无静态格子)*/
  --p-grid-line: rgba(var(--p-cell-rgb),0);

  /* ━━ Stage 3 · Generate 产物墨水 8 档:深墨色(浅底卡片上,spec §2.2 --p-ink-full)━━
     generate panel 是浅底卡片(bg-elevated),产物像素图用深墨 cells 才有对比
     复用 --p-text-rgb(25,40,45 深墨绿,浅底上 AAA 对比);i1 淡灰 → i7 深墨实线 */
  --p-ink-dim: rgba(var(--p-text-rgb),0);
  --p-i1:      rgba(var(--p-text-rgb),0.14);   /* 最淡:辅助网格线 / 远景 */
  --p-i2:      rgba(var(--p-text-rgb),0.26);
  --p-i3:      rgba(var(--p-text-rgb),0.40);
  --p-i4:      rgba(var(--p-text-rgb),0.55);
  --p-i5:      rgba(var(--p-text-rgb),0.70);
  --p-i6:      rgba(var(--p-text-rgb),0.84);
  --p-i7:      rgba(var(--p-text-rgb),1);       /* 主轮廓 / 标题条 / 强调 */
  --p-i-accent: var(--p-accent);                /* 产物里的 accent 点缀(memo 横条 / 勾选)*/

  /* ━━ 波纹动画时序(hero.js 读取) ━━ */
  --p-cell-fade:            0ms;    /* 完全瞬切,圆环锋利(v3 修:30→0) */
  --p-ripple-life-min:    2500ms;   /* 寿命缩短,节奏变快(v3 修:4500→2500) */
  --p-ripple-life-max:    5000ms;   /* (v3 修:9000→5000) */
  --p-ripple-wave-stagger: 700ms;   /* 同源圈间隔(v7 修:500→700,配 power=2.0 起始快但三环不堆) */
  --p-ripple-ring-width:   1.2;     /* 圆环宽度(v12:0.8→1.2,稳态圈带太细看不见;
                                       三环 stagger 700ms 时间差 1400ms,半径差 ~6 cell,1.2 圈宽不堆积) */

  /* ━━ 入场动画(boot-in) ━━ */
  --p-boot-duration:  1800ms;  /* 总时长(用户决议:1.5-2s 开机感) */
  --p-boot-stagger:    8ms;    /* 单 cell 入场延迟(按距中心距离 × 此值) */
  --p-boot-grid-in:   200ms;   /* 网格底纹 fade in(0-200ms) */
  --p-boot-h1-in:     800ms;   /* H1 fade in 起始时刻 */
  --p-boot-h1-dur:    400ms;
  --p-boot-content-staggers: 80ms; /* H2/CTA/meta 依次起始的间隔 */

  /* ━━ 性能预算(hero.js 用) ━━
     v4 修:2400 → 12000 — spike 实测桌面 14000 cells / iPhone 60fps,
     2400 让 cellSize 被强制放大到 ~20px(网格太大,失去颗粒感),
     提到 12000 让 1280×800 视口下 cellSize 维持 10px(spike v4 实验定下的桌面值)
     iPhone 12 屏 7px × 49×105 = 5145 cells,在 12000 内无需放大 */
  --p-cell-budget-max: 12000;

  /* ━━ 缓动曲线(常用) ━━ */
  --p-ease-ripple: cubic-bezier(0.2, 0.9, 0.25, 1);  /* ease-out 节奏,慢起快收尾 */
  --p-ease-fade:   cubic-bezier(0.4, 0, 0.2, 1);     /* 标准 material 缓动 */
}

/* ━━ 移动端 cell 加大档(7px,保持视觉颗粒感同时减少 cells 数)━━ */
@media (max-width: 768px) {
  :root {
    --p-cell-size: 7px;
  }
}

/* ━━ prefers-reduced-motion:入场动画时长归 0,常驻波纹保留但简化 ━━ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --p-boot-duration: 0ms;
    --p-boot-grid-in:  0ms;
    --p-boot-h1-dur:   0ms;
    --p-boot-stagger:  0ms;
    /* 常驻波纹周期拉到 2x,降低运动感(但保留视觉存在感) */
    --p-ripple-life-min: 9000ms;
    --p-ripple-life-max: 14000ms;
  }
}