/*! ============================================================
 * design-system/tokens.css —— 设计 Token 唯一真源
 * 2026-10-12 狼哥：从 dash-style-0.css + wb-ui.css 抽出
 *
 * 命名规范：
 *   轻奢化核心：--sh-* / --hl-* / --r-* / --sp-* / --fs-* / --ease-* / --dur-*
 *   兼容别名：  --wb-r-* / --wb-sh-* / --wb-t-* （模块页历史用法）
 * 使用：所有页面 <link rel="stylesheet" href=".../design-system/tokens.css">
 * ============================================================ */
:root {
  /* ── 多层阴影（近/中/远四层，替代单层"平"阴影） ── */
  --sh-1: 0 1px 2px rgba(15,20,34,.04), 0 1px 3px rgba(15,20,34,.06);
  --sh-2: 0 2px 4px rgba(15,20,34,.04), 0 4px 12px rgba(15,20,34,.07);
  --sh-3: 0 4px 8px rgba(15,20,34,.05), 0 12px 28px rgba(15,20,34,.10);
  --sh-4: 0 8px 16px rgba(15,20,34,.06), 0 24px 56px rgba(15,20,34,.16);
  /* ── 顶部高光（卡片"实体感"关键） ── */
  --hl-top: inset 0 1px 0 rgba(255,255,255,.72);
  --hl-top-d: inset 0 1px 0 rgba(255,255,255,.06);
  /* ── 圆角节奏 ── */
  --r-xs: 6px; --r-s: 8px; --r-m: 10px; --r-l: 12px; --r-xl: 16px; --r-2xl: 26px;
  /* ── 间距系统 ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* ── 字阶 + 行高 ── */
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px;
  --lh-tight: 1.3; --lh-norm: 1.55; --lh-loose: 1.8;
  /* ── 字重 ── */
  --fw-n: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700; --fw-eb: 800;
  /* ── 动效曲线 + 时长 ── */
  --ease-out: cubic-bezier(.22,.9,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .15s; --dur-norm: .22s; --dur-slow: .32s;
  /* ── 玻璃拟态 ── */
  --glass-bg: rgba(255,255,255,.72);
  --glass-blur: saturate(1.6) blur(14px);
  /* ── 焦点环（无障碍） ── */
  --ring: 0 0 0 3px rgba(51,112,255,.22);

  /* ── 兼容别名（模块页历史用法 --wb-*） ── */
  --wb-r-xs: var(--r-xs); --wb-r-sm: var(--r-s); --wb-r-md: var(--r-m);
  --wb-r-lg: var(--r-l); --wb-r-xl: 14px; --wb-r-pill: 20px;
  --wb-sh-1: var(--sh-1); --wb-sh-2: var(--sh-2); --wb-sh-3: var(--sh-3);
  --wb-t-fast: var(--dur-fast); --wb-t-mid: .18s; --wb-t-slow: .25s;
  --wb-ease: var(--ease-in-out);
}

/* ── 深色主题（阴影更深 / 高光更弱） ── */
[data-theme="dark"] {
  --sh-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.24);
  --sh-2: 0 2px 4px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.34);
  --sh-3: 0 4px 8px rgba(0,0,0,.30), 0 12px 28px rgba(0,0,0,.42);
  --sh-4: 0 8px 16px rgba(0,0,0,.34), 0 24px 56px rgba(0,0,0,.52);
  --hl-top: var(--hl-top-d);
  --glass-bg: rgba(28,32,42,.68);
}

/* ── 通用组件轻奢化（只加不覆盖） ── */
.wb-card, .mod-card, .panel, .card {
  box-shadow: var(--sh-2), var(--hl-top);
  border-radius: var(--r-l);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wb-card:hover, .mod-card:hover, .panel:hover {
  box-shadow: var(--sh-3), var(--hl-top);
  transform: translateY(-1px);
}
.wb-btn, .btn, button.wb-btn {
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.wb-btn:hover, .btn:hover { box-shadow: var(--sh-1); }
.wb-btn:active, .btn:active { transform: translateY(1px); }
.wb-input:focus, .mod-input:focus, input.wb-input:focus, textarea.wb-input:focus {
  box-shadow: var(--ring);
  border-color: rgba(51,112,255,.5);
}
.modal-box { box-shadow: var(--sh-4); border-radius: var(--r-xl); }
/* ★★★ 2026-10-12 韩老魔（狼哥）：全局焦点环 —— 【输入类不加环】
   （原来所有元素 :focus-visible 都加蓝环 → 输入框点击出现蓝框）*/
:focus-visible { outline: none; box-shadow: var(--ring); }
input:focus-visible, textarea:focus-visible, select:focus-visible,
[contenteditable]:focus-visible, [contenteditable="true"]:focus-visible,
[role="textbox"]:focus-visible, .wb-input:focus-visible, .mod-input:focus-visible,
input:focus, textarea:focus, [contenteditable]:focus, [contenteditable="true"]:focus {
  outline: none !important;
  box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   ★ 2026-10-14 权威增强（来源均标注，可复核）
   · Open Props  → 多层阴影 / easing 全套
   · Radix Colors → 12 级色阶
   · shadcn/ui   → 圆角倍数派生
   · Emil Kowalski → 签名曲线（iOS 抽屉手感）
   · HarmonyOS   → 标准曲线 + 时长规范
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── ① 色阶（Radix Colors 12 级 · 官方色值）──────────────
     用途：1-2 背景 / 3-5 组件 / 6-8 边框 / 9 实心 / 10 hover / 11-12 文字 */
  --blue-1:#fbfdff; --blue-2:#f4faff; --blue-3:#e6f4fe; --blue-4:#d5efff;
  --blue-5:#c2e5ff; --blue-6:#acd8fc; --blue-7:#8ec8f6; --blue-8:#5eb1ef;
  --blue-9:#0090ff; --blue-10:#0588f0; --blue-11:#0d74ce; --blue-12:#113264;

  --indigo-1:#fdfdfe; --indigo-2:#f7f9ff; --indigo-3:#edf2fe; --indigo-4:#e1e9ff;
  --indigo-5:#d2deff; --indigo-6:#c1d0ff; --indigo-7:#abbdf9; --indigo-8:#8da4ef;
  --indigo-9:#3e63dd; --indigo-10:#3358d4; --indigo-11:#3a5bc7; --indigo-12:#1f2d5c;

  --green-1:#fbfefc; --green-2:#f4fbf6; --green-3:#e6f6eb; --green-4:#d6f1df;
  --green-5:#c4e8d1; --green-6:#adddc0; --green-7:#8eceaa; --green-8:#5bb98b;
  --green-9:#30a46c; --green-10:#2b9a66; --green-11:#218358; --green-12:#193b2d;

  --red-1:#fffcfc; --red-2:#fff7f7; --red-3:#feebec; --red-4:#ffdbdc;
  --red-5:#ffcdce; --red-6:#fdbdbe; --red-7:#f4a9aa; --red-8:#eb8e90;
  --red-9:#e5484d; --red-10:#dc3e42; --red-11:#ce2c31; --red-12:#641723;

  --amber-1:#fdfdfc; --amber-2:#faf9f2; --amber-3:#f2f0e7; --amber-4:#eae6db;
  --amber-5:#e1dccf; --amber-6:#d8d0bf; --amber-7:#cbc0aa; --amber-8:#b9a88d;
  --amber-9:#978365; --amber-10:#8c7a5e; --amber-11:#71624b; --amber-12:#3b352b;

  --violet-1:#fdfcfe; --violet-2:#faf8ff; --violet-3:#f4f0fe; --violet-4:#ebe4ff;
  --violet-5:#e1d9ff; --violet-6:#d4cafe; --violet-7:#c2b5f5; --violet-8:#aa99ec;
  --violet-9:#6e56cf; --violet-10:#654dc4; --violet-11:#6550b9; --violet-12:#2f265f;

  --gray-1:#fcfcfc; --gray-2:#f9f9f9; --gray-3:#f0f0f0; --gray-4:#e8e8e8;
  --gray-5:#e0e0e0; --gray-6:#d9d9d9; --gray-7:#cecece; --gray-8:#bbbbbb;
  --gray-9:#8d8d8d; --gray-10:#838383; --gray-11:#646464; --gray-12:#202020;

  /* 纯黑叠加层（做半透明边框/遮罩直接用）*/
  --blackA-1:rgba(0,0,0,.05); --blackA-2:rgba(0,0,0,.1); --blackA-3:rgba(0,0,0,.15);
  --blackA-5:rgba(0,0,0,.3); --blackA-6:rgba(0,0,0,.4); --blackA-8:rgba(0,0,0,.6);

  /* ── ② 多层阴影（Open Props 写法：hsl 单变量 + 最多 7 层）── */
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --ss-3: calc(var(--shadow-strength) + 2%);
  --ss-4: calc(var(--shadow-strength) + 3%);
  --ss-5: calc(var(--shadow-strength) + 4%);
  --ss-6: calc(var(--shadow-strength) + 5%);
  --ss-8: calc(var(--shadow-strength) + 7%);
  --ss-10: calc(var(--shadow-strength) + 9%);
  --inner-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;

  /* 卡片（2 层）*/
  --sh-card:
    0 3px 5px -2px hsl(var(--shadow-color) / var(--ss-4)),
    0 7px 14px -5px hsl(var(--shadow-color) / var(--ss-6));
  /* 浮层/弹窗（6 层，Open Props shadow-5）*/
  --sh-float:
    0 -1px 2px 0 hsl(var(--shadow-color) / var(--ss-3)),
    0 2px 1px -2px hsl(var(--shadow-color) / var(--ss-4)),
    0 5px 5px -2px hsl(var(--shadow-color) / var(--ss-4)),
    0 10px 10px -2px hsl(var(--shadow-color) / var(--ss-5)),
    0 20px 20px -2px hsl(var(--shadow-color) / var(--ss-6)),
    0 40px 40px -2px hsl(var(--shadow-color) / var(--ss-8));
  /* 输入框内凹 */
  --sh-inset: inset 0 1px 2px 0 hsl(var(--shadow-color) / var(--ss-10)), var(--inner-highlight);

  /* ── ③ 圆角倍数派生（shadcn/ui 技巧：改一个值全站缩放）── */
  --radius: 12px;
  --radius-sm: calc(var(--radius) * 0.6);   /* 7.2px  */
  --radius-md: calc(var(--radius) * 0.8);   /* 9.6px  */
  --radius-lg: var(--radius);               /* 12px   */
  --radius-xl: calc(var(--radius) * 1.4);   /* 16.8px */
  --radius-2xl: calc(var(--radius) * 1.8);  /* 21.6px */
  --radius-3xl: calc(var(--radius) * 2.2);  /* 26.4px */
  --radius-full: 9999px;

  /* ── ④ 动效曲线（权威值）── */
  /* HarmonyOS 标准曲线（我们已有，完全一致）*/
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  /* Open Props expo-out（进入用，比默认更"急"）*/
  --ease-enter: cubic-bezier(0.19, 1, 0.22, 1);
  /* ★ Emil 签名曲线（iOS 抽屉/模态手感）*/
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* 减速（进入）/ 加速（离开）*/
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1.0, 1.0);
  /* 弹性回弹 */
  --ease-elastic: cubic-bezier(0.5, 1.25, 0.75, 1.25);

  /* ── ⑤ 时长（Material/HarmonyOS 规范）── */
  --dur-fast: 150ms;    /* 高频交互 hover/开关 */
  --dur-enter: 225ms;   /* 元素进入（官方值）*/
  --dur-exit: 195ms;    /* 元素离开（官方值）*/
  --dur-base: 300ms;    /* 常规转场（上限）*/
  --dur-slow: 400ms;    /* 大位移/全屏 */

  /* ── ⑥ 玻璃拟态（Apple 五档近似）── */
  --glass-ultrathin: blur(12px) saturate(160%);
  --glass-thin:      blur(20px) saturate(180%);
  --glass-regular:   blur(32px) saturate(180%);
  --glass-thick:     blur(48px) saturate(200%);
  --glass-bg-light: rgba(255,255,255,.72);
  --glass-bg-regular: rgba(255,255,255,.82);
}

[data-theme="dark"] {
  --shadow-color: 220 40% 2%;
  --shadow-strength: 25%;   /* ★ 深色下阴影强度 ×25（Open Props 原值）*/
  --inner-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
  --glass-bg-light: rgba(28,32,42,.68);
  --glass-bg-regular: rgba(28,32,42,.82);
}

/* ══════════════════════════════════════════════════════════════
   ★ 语义色层（Semantic Tokens）—— 映射到原子色阶
   2026-10-14 · 组件只引用这一层，换肤/暗色只改这里
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── 表面层级 ── */
  --color-bg:            var(--gray-1);      /* 页面底 */
  --color-bg-subtle:     var(--gray-2);      /* 次级底 */
  --color-surface:       #ffffff;            /* 卡片面 */
  --color-surface-hover: var(--gray-2);
  --color-surface-active:var(--gray-3);

  /* ── 边框 ── */
  --color-border-subtle: var(--gray-3);
  --color-border:        var(--gray-5);
  --color-border-strong: var(--gray-7);

  /* ── 文字 ── */
  --color-text:          var(--gray-12);     /* 主文字 */
  --color-text-sub:      var(--gray-11);     /* 次文字 */
  --color-text-dim:      var(--gray-9);      /* 弱文字 */
  --color-text-invert:   #ffffff;

  /* ── 主色（brand = indigo/blue）── */
  --color-primary:        var(--blue-9);
  --color-primary-hover:  var(--blue-10);
  --color-primary-soft:   var(--blue-3);
  --color-primary-border: var(--blue-7);
  --color-primary-text:   var(--blue-11);

  /* ── 语义状态 ── */
  --color-success:        var(--green-9);
  --color-success-soft:   var(--green-3);
  --color-success-text:   var(--green-11);
  --color-warn:           var(--amber-9);
  --color-warn-soft:      var(--amber-3);
  --color-warn-text:      var(--amber-11);
  --color-danger:         var(--red-9);
  --color-danger-soft:    var(--red-3);
  --color-danger-text:    var(--red-11);
  --color-info:           var(--blue-9);
  --color-info-soft:      var(--blue-3);

  /* ── 遮罩/叠加 ── */
  --color-overlay:        rgba(20,26,40,.4);
  --color-overlay-blur:   blur(10px);

  /* ── 焦点环 ── */
  --color-focus-ring:     var(--blue-9);
}

[data-theme="dark"] {
  --color-bg:            var(--gray-1);
  --color-bg-subtle:     var(--gray-2);
  --color-surface:       var(--gray-2);
  --color-surface-hover: var(--gray-3);
  --color-surface-active:var(--gray-4);
  --color-border-subtle: var(--gray-3);
  --color-border:        var(--gray-5);
  --color-border-strong: var(--gray-7);
  --color-text:          var(--gray-12);
  --color-text-sub:      var(--gray-11);
  --color-text-dim:      var(--gray-9);
  --color-overlay:       rgba(0,0,0,.6);
}

/* ══════════════════════════════════════════════════════════════
   ★ z-index 注册表（避免层级混乱）
   ★ 2026-10-14 · 新增层级先在这里登记，不要随手写 9999
   ══════════════════════════════════════════════════════════════ */
:root {
  --z-base:        0;      /* 常规内容 */
  --z-dropdown:    100;    /* 下拉菜单 */
  --z-sticky:      200;    /* 吸顶栏 */
  --z-drawer:      300;    /* 侧滑抽屉 */
  --z-modal:       400;    /* 弹窗 */
  --z-popover:     500;    /* 气泡卡 */
  --z-toast:       600;    /* 全局提示 */
  --z-tooltip:     700;    /* 文字提示 */
  --z-loading:     800;    /* 全屏加载 */
}

/* ══════════════════════════════════════════════════════════════
   ★ 字体系统（字族 + 字距 + tabular-nums）
   ★ 2026-10-14 · 对标 HarmonyOS Sans / Inter
   ══════════════════════════════════════════════════════════════ */
:root {
  /* 字族（优先 HarmonyOS Sans，回落系统）*/
  --font-sans: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* 字距（大标题收紧，正文正常）*/
  --ls-tight: -0.4px;    /* 大标题/数字 */
  --ls-normal: 0;        /* 正文 */
  --ls-wide: .2px;       /* 小标签 */
  /* 行高 */
  --lh-heading: 1.25;
  --lh-body: 1.65;
  --lh-loose: 1.8;
}
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* ★ 数字统一等宽（不跳动）*/
.tnum, .num, [data-num] { font-variant-numeric: tabular-nums; }
/* 大标题收紧 */
h1, h2, .h1, .h2 { letter-spacing: var(--ls-tight); line-height: var(--lh-heading); }


/* ══════════════════════════════════════════════════════════════
   ★ 2026-10-15 补齐 Radix 官方源（npm @radix-ui/colors）
   · 暗色色阶（官方值）
   · alpha 半透明版（做边框/遮罩/玻璃）
   ══════════════════════════════════════════════════════════════ */

/* ① 官方暗色色阶 */
[data-theme="dark"] {
  --amber-1: #16120c;
  --amber-10: #ffd60a;
  --amber-11: #ffca16;
  --amber-12: #ffe7b3;
  --amber-2: #1d180f;
  --amber-3: #302008;
  --amber-4: #3f2700;
  --amber-5: #4d3000;
  --amber-6: #5c3d05;
  --amber-7: #714f19;
  --amber-8: #8f6424;
  --amber-9: #ffc53d;
  --blue-1: #0d1520;
  --blue-10: #3b9eff;
  --blue-11: #70b8ff;
  --blue-12: #c2e6ff;
  --blue-2: #111927;
  --blue-3: #0d2847;
  --blue-4: #003362;
  --blue-5: #004074;
  --blue-6: #104d87;
  --blue-7: #205d9e;
  --blue-8: #2870bd;
  --blue-9: #0090ff;
  --cyan-1: #0b161a;
  --cyan-10: #23afd0;
  --cyan-11: #4ccce6;
  --cyan-12: #b6ecf7;
  --cyan-2: #101b20;
  --cyan-3: #082c36;
  --cyan-4: #003848;
  --cyan-5: #004558;
  --cyan-6: #045468;
  --cyan-7: #12677e;
  --cyan-8: #11809c;
  --cyan-9: #00a2c7;
  --gray-1: #111111;
  --gray-10: #7b7b7b;
  --gray-11: #b4b4b4;
  --gray-12: #eeeeee;
  --gray-2: #191919;
  --gray-3: #222222;
  --gray-4: #2a2a2a;
  --gray-5: #313131;
  --gray-6: #3a3a3a;
  --gray-7: #484848;
  --gray-8: #606060;
  --gray-9: #6e6e6e;
  --green-1: #0e1512;
  --green-10: #33b074;
  --green-11: #3dd68c;
  --green-12: #b1f1cb;
  --green-2: #121b17;
  --green-3: #132d21;
  --green-4: #113b29;
  --green-5: #174933;
  --green-6: #20573e;
  --green-7: #28684a;
  --green-8: #2f7c57;
  --green-9: #30a46c;
  --orange-1: #17120e;
  --orange-10: #ff801f;
  --orange-11: #ffa057;
  --orange-12: #ffe0c2;
  --orange-2: #1e160f;
  --orange-3: #331e0b;
  --orange-4: #462100;
  --orange-5: #562800;
  --orange-6: #66350c;
  --orange-7: #7e451d;
  --orange-8: #a35829;
  --orange-9: #f76b15;
  --red-1: #191111;
  --red-10: #ec5d5e;
  --red-11: #ff9592;
  --red-12: #ffd1d9;
  --red-2: #201314;
  --red-3: #3b1219;
  --red-4: #500f1c;
  --red-5: #611623;
  --red-6: #72232d;
  --red-7: #8c333a;
  --red-8: #b54548;
  --red-9: #e5484d;
  --violet-1: #14121f;
  --violet-10: #7d66d9;
  --violet-11: #baa7ff;
  --violet-12: #e2ddfe;
  --violet-2: #1b1525;
  --violet-3: #291f43;
  --violet-4: #33255b;
  --violet-5: #3c2e69;
  --violet-6: #473876;
  --violet-7: #56468b;
  --violet-8: #6958ad;
  --violet-9: #6e56cf;
}

/* ② 官方 alpha（半透明，做边框/遮罩）*/
:root {
  --blue-a1: #0080ff04;
  --blue-a10: #0086f0fa;
  --blue-a11: #006dcbf2;
  --blue-a12: #002359ee;
  --blue-a2: #008cff0b;
  --blue-a3: #008ff519;
  --blue-a4: #009eff2a;
  --blue-a5: #0093ff3d;
  --blue-a6: #0088f653;
  --blue-a7: #0083eb71;
  --blue-a8: #0084e6a1;
  --blue-a9: #0090ff;
}

/* ══════════════════════════════════════════════════════════════
   ★ 2026-10-15 Open Props 官方阴影 + 曲线（npm open-props）
   · 阴影最多 7 层 + hsl 单变量控制
   · 完整 easing 阶梯（1-5 级）
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ① 官方阴影（hsl 单变量 + 多层叠加）*/
  --op-shadow-color: 220 3% 15%;
  --op-shadow-strength: 1%;
  --op-inner-hl: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0,0,0,.067);

  --op-shadow-1: 0 1px 2px -1px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 9%));
  --op-shadow-2:
    0 3px 5px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 5%));
  --op-shadow-3:
    0 -1px 3px 0 hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 7%));
  --op-shadow-4:
    0 -2px 5px 0 hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 5%)),
    0 16px 16px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 6%));
  --op-shadow-5:
    0 -1px 2px 0 hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 2%)),
    0 2px 1px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 3%)),
    0 10px 10px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 4%)),
    0 20px 20px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 5%)),
    0 40px 40px -2px hsl(var(--op-shadow-color) / calc(var(--op-shadow-strength) + 7%));

  /* ② 官方 easing 阶梯 */
  --op-ease-1: cubic-bezier(.25, 0, .5, 1);
  --op-ease-2: cubic-bezier(.25, 0, .4, 1);
  --op-ease-3: cubic-bezier(.25, 0, .3, 1);
  --op-ease-4: cubic-bezier(.25, 0, .2, 1);
  --op-ease-5: cubic-bezier(.25, 0, .1, 1);
  --op-ease-out-1: cubic-bezier(0, 0, .75, 1);
  --op-ease-out-2: cubic-bezier(0, 0, .50, 1);
  --op-ease-out-3: cubic-bezier(0, 0, .3, 1);
  --op-ease-out-4: cubic-bezier(0, 0, .1, 1);
  --op-ease-out-5: cubic-bezier(0, 0, 0, 1);
  --op-ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --op-ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
  --op-ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --op-spring-1: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.6%, 1);
}

/* ③ 深色下阴影强度 ×25（官方做法）*/
[data-theme="dark"] {
  --op-shadow-color: 220 40% 2%;
  --op-shadow-strength: 25%;
  --op-inner-hl: inset 0 -.5px 0 0 rgba(255,255,255,.067), inset 0 .5px 0 0 rgba(0,0,0,.467);
}