/* ==========================================================================
   YING HANDMADE STUDIO — Design Tokens
   方向：Studio Bench（工作台）

   色彩全部取自这间工作室真实存在的东西，不是从色卡里挑的：
   刷了石膏底料的画布、未漂白的亚麻、群青颜料、熟褐、未染色的羊毛。

   ── 为什么换掉了上一版的「暖奶油 + 陶土」 ──────────────────
   Anthropic 官方 frontend-design 技能里列了三种「一眼就是 AI 做的」长相，
   第一种就是「暖奶油底（≈#F4F1EA）+ 高对比衬线 + 陶土色强调」。
   上一版正好整个命中。那套色是照「暖中性 + 单强调色」的公式套出来的，
   不是从题材长出来的 —— 而且题材本来也不对：你做的是油画，不是铅笔素描。

   这一版从油画的材料世界重推。附带好处是对比余量大幅提升：
     强调色 / 页面底    黄铜 4.75  →  群青 9.01
     白字 / 强调色底    黄铜 5.31  →  群青 10.29

   深度策略：只用线条，全站零投影。
   投影会把「一幅画」变成「一个 UI 卡片」，这是这个站最要避免的事。
   ========================================================================== */

:root {

  /* ── 底子 · Gesso ───────────────────────────────────────────
     刷在画布上的石膏底料。这里用的是**暖调**的那种 ——
     页面底不是纯白，也不是冷的粉白，是放了些年头的画布该有的温度。

     ⚠️ 曾经把它改成偏冷的 #F1F0EA，理由是「暖奶油+衬线+陶土」
        被 frontend-design 列为 AI 默认第一种。那是过度执行 ——
        那份技能自己写着 "the brief's own words always win"，
        而这个 brief 明确要的就是手作店的暖度。改回来了。     */
  --gesso:            #F7F2E7;   /* 页面底 */
  --gesso-white:      #FDFBF6;   /* 上过底的画布 — 卡片、相片白边 */

  /* ── 亚麻画布 · Linen ───────────────────────────────────────
     未涂底的亚麻本色，比底子再深一档。                          */
  --linen:            #EDE5D3;   /* 输入框、压凹面、选中态 */
  --linen-edge:       #DCD0B6;   /* 画布切边 */

  /* ── 熟褐 · Umber ───────────────────────────────────────────
     油画的经典暗部色，暖黑但不是 #000。
     只有三级文字 —— 在这种浅底上，能过 WCAG AA（4.5:1）的明度
     区间就这么宽，硬凑第四级一定会跟第三级撞成同一个颜色。      */
  --umber:            #2A2118;   /* 正文与标题  纸底 14.15 · 压凹 12.60 */
  --umber-soft:       #584E42;   /* 次要说明    纸底  7.28 · 压凹  6.48 */
  --umber-faint:      #6A6053;   /* 小字元信息  纸底  5.51 · 压凹  4.91 */

  /* ⚠️ 不是文字色。只用于禁用态、纯装饰、占位图上的说明字。
     任何真正要读的文字都不许用它。                             */
  --umber-ghost:      #A79C8A;

  /* ── 烧赭 · Sienna ──────────────────────────────────────────
     Burnt Sienna，油画调色板上几百年的常客，暖赭石色。
     全站唯一的强调色，只用在主行动点上 —— 多用一次就贬值一次。

     比上一版的黄铜 #9C5C18 压深了一档：
       黄铜  纸底 4.75  白字 5.31   ← 刚好压线过 AA，零余量
       烧赭  纸底 6.13  白字 6.84   ← 有真正的余量               */
  --sienna:           #8A4A14;
  --sienna-deep:      #6F3B0F;   /* hover */
  --sienna-wash:      #F4EBDE;   /* 极淡底，用于纪念区块 */

  /* ── 原色羊毛 · Fleece ──────────────────────────────────────
     未染色的羊毛。羊毛毡品类的识别色，与油画区分开。            */
  --fleece:           #D8CDB8;

  /* ── 语义色 · Semantic ──────────────────────────────────────
     出错、警告这类必须传达状态的地方。它们不是「装饰色」，
     所以允许跳出上面那套材料色 —— 但同样只在这里定义一次。

     取的是氧化铁红（铁锈色），跟熟褐同一个色系，
     不用刺眼的纯红 —— 纪念场景里满屏红字很吓人。            */
  --alert:            #A8422B;   /* 错误文字   gesso 底 5.29:1 */
  --alert-deep:       #8E3722;   /* hover / 更重的强调 */
  --alert-wash:       #F6E9E3;   /* 错误提示的淡底 */

  /* ── 订单状态色 · Status ────────────────────────────────────
     只在后台用。全部实测过 4.5:1（12px 小字按正文门槛要求），
     而且从不单独靠颜色传意 —— 每个标签都带文字 + 小圆点。      */
  --st-new:           #8A4A14;   /* 新订单   6.13 —— 就是烧赭 */
  --st-talking:       #4A6B8A;   /* 沟通中   4.89 */
  --st-making:        #567441;   /* 制作中   4.63 */
  --st-done:          #6B6B6B;   /* 已完成   4.67 */
  --st-cancel:        #A8422B;   /* 已取消   5.29 —— 同 alert */

  /* ── 线 · Lines ─────────────────────────────────────────────
     唯一的分层手段。第一眼不该看见线，只该感觉到结构。

     分成两类，因为无障碍规范对它们的要求完全不同：

     装饰线（下面三个）—— 区块分隔、卡片描边。
       WCAG 1.4.11 管的是「识别控件与状态所必需的视觉信息」，
       装饰性分隔线不在其列。硬拉到 3:1 只会让线变粗变脏，
       毁掉「零投影、只靠细线」的整体策略。                     */
  --line:             rgba(42, 35, 32, .11);
  --line-soft:        rgba(42, 35, 32, .06);
  --line-strong:      rgba(42, 35, 32, .22);

  /* 控件边界 —— 输入框、单选圈、复选方框、次要按钮、上传区。
     这些是控件本体，WCAG 1.4.11 强制 3:1。
     未选中的单选框必须看得见，否则低视力用户根本找不到它。

     0.54 是算出来的：控件会同时坐在 gesso 页面底和亚麻输入框底上，
     两边都要过 3:1，取更严的一边再留余量。
       实测 gesso 底 3.37 · 亚麻底 3.19                          */
  --line-control:     rgba(42, 35, 32, .54);

  /* ── 字 · Type ──────────────────────────────────────────────
     【中文版】字体栈是「拉丁字体在前，中文字体在后」：
     价格 $165、尺寸 11×14" 这些数字和符号仍然走 Fraunces / Karla，
     汉字落到宋体 / 苹方。这样中英混排时数字不会变成难看的全角。

     标题用宋体系 —— 它在中文里承担的角色，正好等同于 Fraunces
     在英文里承担的：有印刷感、有历史感、庄重而不冷。
     换回英文版时，把每个字体栈的中文部分删掉即可。           */
  --face-display:  "Fraunces", "Songti SC", "Source Han Serif SC",
                   "Noto Serif SC", "SimSun", Georgia, serif;
  --face-text:     "Karla", "PingFang SC", "Source Han Sans SC",
                   "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;

  --size-xs:       0.75rem;      /* 12 — 作品卡、标签 */
  --size-sm:       0.8125rem;    /* 13 — 元信息 */
  --size-base:     0.9375rem;    /* 15 — 正文 */
  --size-md:       1.0625rem;    /* 17 — 引导段 */
  --size-lg:       1.25rem;      /* 20 */
  --size-xl:       1.5rem;       /* 24 */
  --size-2xl:      2rem;         /* 32 */

  /* 【中文版】汉字是方块字，视觉重量比拉丁字母大，
     同样的 px 看起来更大更满，所以大标题要压下来一档。
     换回英文时：--size-section 上限回 2.5rem，--size-display 回 4.25rem */
  --size-section:  clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  --size-display:  clamp(2rem, 1.35rem + 2.6vw, 3.25rem);

  /* 【中文版】行高全面调高。
     拉丁字母有升部降部撑开行距，汉字没有，1.6 的行高中文会挤成一块。
     换回英文时：tight 1.05 / body 1.62 / loose 1.75 */
  --lead-tight:    1.32;
  /* 非正文的短标签用。不受【中文版】那条「行高提到 1.85」的约束 ——
     小标签继承 1.85 之后，设计上想要的「4px 紧配对」实际是 12px，
     标签和它说明的东西就粘不到一起了。 */
  --lead-label: 1.25;
  --lead-snug:     1.5;
  --lead-body:     1.85;
  --lead-loose:    2;

  /* 【中文版】负字距全部归零 —— 负值会把汉字挤在一起，非常难看。
     换回英文时：display -0.03em / tight -0.015em */
  --track-display: 0;
  --track-tight:   0;
  --track-normal:  0;
  --track-label:   0.14em;       /* 小标签仍然拉开，中英通用 */

  /* ── 间距 · Space（base 8） ─────────────────────────────────
     区块间距刻意不等：88 / 120 / 160 交替，制造呼吸节奏。
     每段都一样宽是模板的味道。                                */
  --s1:  4px;    --s2:  8px;    --s3: 12px;   --s4: 16px;
  --s5: 24px;    --s6: 32px;    --s7: 48px;   --s8: 64px;
  --s9: 88px;    --s10: 120px;  --s11: 160px;

  /* ── 圆角 · Radius ──────────────────────────────────────────
     画框是方的。16px 圆角属于 App，不属于裱画。                */
  --r-sm:   2px;
  --r-md:   3px;
  --r-pill: 999px;   /* 仅用于极少数标签 */

  /* ── 版心 ──────────────────────────────────────────────────*/
  --measure:       1240px;
  --measure-text:  60ch;     /* 长文可读宽度 */
  /* 长正文（法务页）比引导段窄一档：15px × 68ch ≈ 540px，
     跟 17px × 60ch ≈ 530px 是刻意对齐的 —— 写成 token 才不会有人单改一个 */
  --measure-prose: 68ch;

  /* ── 动效 ──────────────────────────────────────────────────
     克制。这是纪念场景，不是产品发布会。                      */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(0, 0, .2, 1);
  --t-fast:    140ms;
  --t-base:    220ms;

  /* 注意：这里没有任何 --shadow-* token。
     深度策略是 borders-only，全站不使用投影。这是刻意的。      */
}

/* ── 缓存指纹 v2 ─────────────────────────────────────────────
   2026-08-14：上线当天 Cloudflare 把源站的 403 页面当成 CSS 缓存了
   （CF 用 HTTPS 回源，而源站那时只监听 80，落到默认站返回 403），
   并且用 200 状态码发出去。前台整站没样式。

   源站修好后 CF 缓存已清，但**访客浏览器里那份坏的还在**。
   asset() 用文件内容的 md5 做 URL 后缀，所以在这里加一行注释
   就能换掉哈希、换掉 URL，让所有浏览器重新取。

   教训：反向代理会缓存源站的错误响应，源站修好前台不会自己恢复。 */