/* ==========================================================================
   PLIK Lab · homepage v3 · tokens
   v2 的「克制」材料 + 往 spike 02 靠（意境诊断见 README「意境诊断」那张表）。
   白天 / 夜里两套，所有 token 在夜里重新定义。
   ========================================================================== */

@property --obj-z { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --zh    { syntax: "<number>"; inherits: true; initial-value: 0; }
/* [perf] 灯的方向向量不继承：以前 js/tiles.js 把 --vx/--vy/--ldx/--ldy 写在整张卡上，每次滚动整棵子树（文字、SVG）都要重算样式；
   现在 tiles.js 只写到真正用到它们的元素上（CARRIERS），不继承，所以改一个值只重算那一个元素。初始值 = 原来 .tile / .obj 里的默认值。
   新增用到这四个变量的选择器时，要同步 js/tiles.js 的 CARRIERS。 */
@property --vx  { syntax: "<number>"; inherits: false; initial-value: .6; }
@property --vy  { syntax: "<number>"; inherits: false; initial-value: .7; }
@property --ldx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --ldy { syntax: "<number>"; inherits: false; initial-value: 0; }   /* hover 抬起（CSS 过渡） */

:root {
  /* ---- 墙与纸 ---- */
  --wall: #FBFBF8;            /* spike 02 的墙（v2 是 #F9F8F5 + 纸纹 multiply，实测偏灰） */
  --card: #FFFFFF;            /* 幻灯片卡纸（spike 02 .slide 是纯白） */
  --card-back: #FCFCFA;       /* 纸卡的背面：同一张纸，稍微旧一点 */
  --edge: rgb(30 36 48 / .12);/* 卡纸 0.5px 边（spike 02 同值） */
  --edge-thick: #E4E3DE;      /* 纸卡侧过来时看到的那条纸边 */
  --win: #F4F4F0;             /* 缩略图窗口底（spike 02） */
  --paper: #fcfbf9;           /* Magical Pen 的纸（app 原值）；纹理 --paper-tex 是烘焙好的 assets/paper-tex.webp（原来 js/paper.js 运行时生成，见 _recovery/v4-before-perf/） */
  --paper-edge: #e7e5e4;
  --paper-tex: none;            /* [10-18 晚] 纹理由 js/paper-tex.js 在 worker 里算好后写进来（blob: URL）；不支持时退回 url(../assets/paper-tex.webp)。到之前是一张平的纸 */
  --film-rgb: 159 210 234;    /* 蓝色透明片——颜色来自内容 */
  --film-edge: 96 150 182;
  --film-a: .30;
  --film-tint: .55;           /* 透明片投在墙上的蓝光浓度 */

  /* ---- 墨：一种墨色 + 三档 ---- */
  --ink-rgb: 30 36 48;
  --ink: rgb(var(--ink-rgb));
  --ink-2: rgb(var(--ink-rgb) / .78);
  --ink-3-a: .72;             /* [设计系统 v3 · R30] ink-3 的透明度全站只有这一个值；各表面写 rgb(<自己的墨> / var(--ink-3-a)) */
  --ink-3: rgb(var(--ink-rgb) / var(--ink-3-a));
  --hair: rgb(var(--ink-rgb) / .075);
  --hair-2: rgb(var(--ink-rgb) / .14);

  --blue: #9FD2EA; --pink: #F4B8CB; --yellow: #F5E08E;

  /* ---- 影子 ---- */
  --sh-rgb: var(--shadow-rgb, 30 36 48);
  --sh-k: 1;
  --rim-a: 0;
  --sh-a: .22;                /* 影子浓度（v3：一个元素 = contact + key 合一）。静止时 ≈ spike 02 的 0 1px 1.5px α.06 */
  --sh-fade: 14;              /* z 每高这么多 px，浓度减半一次左右 */
  --sh-blur0: 1.2;            /* 贴墙时的模糊（px） */
  --sh-blur-k: 1.2;           /* 每 1px z 增加的模糊 × light-soft */
  --sh-off-k: 1;              /* 偏移 = z × 灯方向 × 这个 */

  /* ---- 字 ---- */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-brand-en: "Bricolage Grotesque Variable", "Bricolage Grotesque", var(--font-text);
  --font-brand-zh: "Smiley Sans Oblique", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-body: 15px;
  --fs-title: 15px;           /* spike 02 .slide .t = 15px */
  --fs-statement: 46px;

  /* ---- 形 ---- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --theme-dur: .6s;

  /* ---- 离墙高度 ---- */
  --z-k: 1;
  --z-hover: 7;

  /* ---- L0 / L4 ---- */
  --wall-tex-k: .12;          /* v2 .35 → v3 .12：纸纹把墙压灰了 */
  --tint-k: .9;               /* L4 灯那一侧的暖 */
  --sun-k: 1;                 /* L4 整面墙的阳光暖意（跟 light-warmth 走；spike 02 意境的主要来源） */
  --board-glow: .6;

  /* ---- [spike 07] 黄金时刻（js/golden.js 写入；0 = 不在黄金时刻）---- */
  --gh: 0;                    /* 「金」的程度：日落前渐入，日落处最浓，日落后褪掉 */
  --gh-dusk: 0;               /* 「暮」的程度：日落后整面墙压暗转冷，到夜里为 1 */
  --l5-c: rgb(255 214 160);   /* 窗光的颜色（琥珀 → 日落时橙红） */
  --l5-a: 0;                  /* 窗光的不透明度 */
  --l5-soft: 14px;            /* 窗光的柔边（blur） */

  color-scheme: light;
}

/* ====================== 夜里 = dark mode：墙暗，内容不暗 ====================== */
:root[data-theme="night"] {
  --wall: #14171D;
  --card: #1F232B;
  --card-back: #1C2028;
  --edge: rgb(236 237 240 / .10);
  --edge-thick: #2B303A;
  --win: #181C24;
  --film-a: .22;
  --film-tint: .30;

  --ink-rgb: 236 237 240;
  --ink-2: rgb(var(--ink-rgb) / .80);
  --hair: rgb(var(--ink-rgb) / .08);
  --hair-2: rgb(var(--ink-rgb) / .16);

  --sh-rgb: 2 3 8;
  --sh-k: 2.2;
  --rim-a: .07;

  --wall-tex-k: .35;
  --tint-k: 1;
  --board-glow: 1;
  color-scheme: dark;
}

/* ==========================================================================
   设计系统 v3（2026-10-22 审稿 R1–R47，规则全文见 Notes docs/design-system.md v3）
   这里是下面这些值的唯一定义处；组件文件只读 token，不再自己写数值。
   ========================================================================== */
:root {
  /* ---- 间距（8 的倍数；4 只用于半档）---- */
  --card-inset: 24px;          /* R2：卡片内距（桌面 / 平板）；手机见下 */
  --grid-gap: 24px;            /* R8：卡片间距，左右上下同值 */
  --tub-inset-y: 16px;         /* R12：物件卡（塑料盆）上下 = 盆壁 + 16 */
  --tub-inset-x: 24px;         /* R12b：左右 = 盆壁 + 24 */
  --bar-h: 56px;               /* R25：顶栏高 = 最高控件 40 + 上下各 8（首页吸顶栏、子页顶栏、手机同值） */
  --foot-gap: 96px;            /* R37：最后一张卡底 → 页脚 PLIK 字母墨迹顶 */
  /* ---- 表面 ---- */
  --night-paper: #2B2722;      /* R39 / R46：夜里纸卡（暗纸）的颜色 —— 首页暗纸卡、夜里「我」卡、家长页卡片、吸顶栏同一个值 */
  --night-ink-rgb: 233 226 212; /* R39：暗纸 / 暗盒子上的浅墨（#E9E2D4）；夜里「我」卡、家长页纸卡、塑料盆、暗纸卡都读它 */
  /* ---- 圆角 ---- */
  --card-r: 4px;               /* R32 / R46：「我」卡和所有纸卡；塑料盆按自己的轮廓 */
  /* ---- 字号（三档）+ 卡片描述 ---- */
  --t-s: 13px; --t-m: 15px; --t-l: 24px;
  --desc-lh: 1.6;              /* R6 / R43：卡片描述只有一档 13 / 1.6 */
  --desc-a: .80;               /* R43：卡片描述的灰只有一个透明度；各表面写 rgb(<自己的墨> / var(--desc-a))，白天 / 夜里、哪张卡都一样 */
  --desc-max: 40em;            /* R24：描述只受行长上限约束 */
  /* ---- 图标 ---- */
  --icon-box: 20px;            /* R19b：图标盒 20，墨迹约 13 */
  --icon-stroke: 1.5px;
}
@media (max-width: 699.98px) {
  :root { --card-inset: 16px; --grid-gap: 16px; --foot-gap: 64px; }   /* 手机：卡内距 16（Wanfang 10-22 已定）、卡间距 16、卡底到页脚 64 */
}

/* 派生 token：由「墨」算出来的值。自定义属性在声明它的元素上就算好了再继承，所以凡是重设了 --ink 的表面，都要在这里列上，
   否则会继承页面算好的值（R39：夜里「我」卡图标发白、按钮深底深字就是这个原因）。新表面类加进这个列表即可。 */
:root, .me-card, .m-paper, .m-plastic, .on-surface, .on-wall, .on-paper, .on-print, .on-plastic, .on-chip {
  --icon-ink: var(--ink);      /* R40：图标 = 实色主墨；没有半透明待机；只有 aria-disabled 淡到 .35 */
  --cta-bg: var(--ink);        /* 主按钮：底 = 这一面的墨 */
  --cta-fg: var(--surface-bg, var(--wall));   /* 字 = 这一面的底色（各表面设 --surface-bg） */
}

/* ---- 中文断行（R17）：不用 keep-all；标点不落行首；标题 balance、正文 pretty。标题按「分句 → 词」断见 js/ui.js PLIKUI.phrase（R36） ---- */
html { line-break: strict; word-break: normal; overflow-wrap: break-word; }
:where(h1, h2, h3, .narrative-title, .finder-line, .back-title, .mh-title, .mh-tag) { text-wrap: balance; }
:where(p, li, .tile-text, .card-desc, .story) { text-wrap: pretty; }