/* ============================================================================
 * theme-pearl.css — 产品主题层「珍珠玻璃 + 仪器化」（仅令牌覆盖）
 *
 * 来源：deliverable/prototype/theme-pearl.css 第 1–4 节（原型与产品同源，先改文档/设计系统再改这里）。
 * 职责：把 design-system 的语义 token 换装为当前评审通过的视觉语言——
 *   蓝 = 选择/主操作，青柠 = 正常/能力/开关已开，琥珀 = 警示，红 = 危险；
 *   材质分四层（rail / pill / float / groove）；圆角 8/12/16/20/24；阴影统一为接触+环境。
 * 纪律：本文件只覆盖视觉属性（色 / 材质 / 圆角 / 阴影 / 圆角刻度 / 面高），不改布局尺寸。
 *       组件级配方见 styles/app.css（同一套令牌，不新增色值）。
 * ========================================================================== */
/* ============================================================================
 * theme-pearl.css — 「珍珠玻璃 + 仪器化」主题层
 *
 * 借鉴 scaffold-vue（scaffold-master/scaffold-vue）的呈现形式与 UI 语言，
 * 映射到本原型既有的语义 token 上，使 25 个画板整体换装：
 *
 *   1. 材质：柔和灰白场景 + 近实色阅读面 + 克制的玻璃浮层，靠「背景不透明度 +
 *      模糊 + 白边强度」分层，不靠换颜色；每个面顶部一道内高光（--edge）。
 *   2. 语义色：蓝 = 选择 / 主操作；青柠 = 正常 / 能力 / 开关已开；
 *      琥珀 = 警示；红 = 危险。颜色的含义与原设计系统一致，只换取值。
 *   3. 仪器化：等宽读数带单位、深色规格铭牌、眉标（字距 .14em）、刻度与斜线填充。
 *      它们表达「读数 / 区间 / 当前位置」，不作装饰。
 *   4. 圆角 8/12/16/20/24 一档到底；阴影统一为「接触阴影 + 环境阴影」。
 *
 * 加载顺序：tokens.css → pages/pages.css → theme-pearl.css（本文件，最后）。
 * 约束：本文件只覆盖视觉属性（色 / 材质 / 圆角 / 阴影 / 字距 / 面高），
 *       不改变任何布局尺寸、不增删任何 DOM 节点、不触碰 design-system/。
 * 例外（显式声明）：.statusbar 由浅色条变为深色铭牌、.dock/.hud 由不透明面
 *       变为玻璃浮层——这是本主题「仪器化」的核心表达，内容与命中区不变。
 * ========================================================================== */

/* ════════════════════════════════════════════════ 1. 令牌 · 浅色（基线） */
:root {
  /* ── 字色四档 ─────────────────────────────────────────────── */
  /* 灰阶比 scaffold-vue 略深一档：本产品正文更小、信息更密，二级文字要过 4.5:1
     （muted #6b757a ≈ 4.6:1；faint 只给元信息用 ≈ 3.2:1，好过原系统的 2.5:1）。 */
  --color-fg-primary: #101418;
  --color-fg-secondary: #596368;
  --color-fg-muted: #6b757a;
  --color-fg-faint: #868f93;
  --color-fg-inverse: #f2f5f4;
  --color-fg-link: #1d61d5;

  /* ── 描边：低对比，靠材质分层而不是靠线 ──────────────────── */
  --color-border-subtle: rgba(46, 58, 62, .06);
  --color-border-default: rgba(46, 58, 62, .1);
  --color-border-strong: rgba(46, 58, 62, .18);
  --color-border-focus: #236de9;

  /* ── 主操作：蓝 ───────────────────────────────────────────── */
  --color-primary: #236de9;
  --color-primary-hover: #1d61d5;
  --color-primary-label: #1d61d5;
  --color-primary-solid: #236de9;
  --color-primary-solid-hover: #1d61d5;
  --color-primary-solid-pressed: #17509e;
  --color-primary-subtle: rgba(35, 109, 233, .1);
  --color-primary-border: rgba(35, 109, 233, .32);

  /* ── 正常 / 能力：青柠 ────────────────────────────────────── */
  --color-success: #58a021;
  --color-success-label: #4e8f1c;
  --color-success-subtle: rgba(130, 221, 45, .16);

  /* ── 警示：琥珀 ───────────────────────────────────────────── */
  --color-warning: #d99a2b;
  --color-warning-label: #a97a1c;
  --color-warning-subtle: rgba(227, 168, 59, .16);

  /* ── 危险：红 ─────────────────────────────────────────────── */
  --color-danger: #ff5a50;
  --color-danger-label: #e0443b;
  --color-danger-subtle: rgba(255, 90, 80, .12);

  --color-info: #236de9;
  --color-info-label: #1d61d5;
  --color-info-subtle: rgba(35, 109, 233, .1);

  /* ── 场景面：画布 / 阅读面 / 浮层 / 凹槽 ──────────────────── */
  --color-bg-canvas: #f6f8f7;
  --color-bg-stage: #fbfcfc;
  --color-bg-panel: #fbfcfc;
  --color-bg-panel-raised: #f1f5f4;
  --color-bg-input: rgba(255, 255, 255, .78);
  --color-bg-hover: rgba(46, 58, 62, .045);
  --color-bg-selected: rgba(35, 109, 233, .1);
  --color-bg-overlay: rgba(16, 20, 24, .26);
  --color-bg-toast: rgba(246, 248, 247, .92);

  /* ── 舞台：网格、幽灵、标牌 ───────────────────────────────── */
  --color-grid-line: rgba(46, 58, 62, .05);
  --color-grid-axis: rgba(46, 58, 62, .12);
  --color-ghost-surface: rgba(46, 58, 62, .07);
  --color-ghost-edge: rgba(46, 58, 62, .1);
  --color-pin-bg: rgba(255, 255, 255, .95);
  --color-pin-border: rgba(46, 58, 62, .18);
  --color-pin-leader: rgba(46, 58, 62, .35);
  --color-pin-latin: #6b757a;

  --color-focus-ring: rgba(35, 109, 233, .8);
  --color-focus-ring-offset: #fbfcfc;

  /* ── 材质原料 ─────────────────────────────────────────────── */
  --shade: 46, 58, 62;
  --line: rgba(var(--shade), .085);
  --line-strong: rgba(var(--shade), .11);
  --glass-line: rgba(255, 255, 255, .88);
  --glass-line-soft: rgba(255, 255, 255, .7);

  --surface: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(249, 252, 251, .93));
  --surface-solid: #fbfcfc;
  --rail-bg: rgba(250, 251, 250, .92);
  --pill-bg: linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(246, 251, 249, .62));
  --pill-inset: inset 0 -1px 0 rgba(105, 122, 128, .08);
  --float-bg: rgba(246, 248, 247, .86);
  --float-inset: inset 0 0 0 1px rgba(120, 132, 135, .13), inset 0 1px 0 rgba(255, 255, 255, .72);
  --groove-bg: rgba(225, 231, 229, .5);
  --groove-inset: inset 0 1px 0 rgba(255, 255, 255, .46);
  --input-bg: rgba(255, 255, 255, .78);
  --hover-bg: rgba(var(--shade), .045);
  --press-bg: rgba(var(--shade), .075);
  --overlay: rgba(16, 20, 24, .26);
  --stage: #e7ebea;
  --frame: #17191d;
  --canvas: #f6f8f7;
  --dark-surface: #131619;

  --edge: inset 0 1px 0 rgba(255, 255, 255, .92);
  --edge-strong: inset 0 1px 0 rgba(255, 255, 255, .98);

  /* ── 规格铭牌（浅 / 深两态都是深色面） ────────────────────── */
  --plate-bg: rgba(21, 24, 26, .9);
  --plate-line: rgba(255, 255, 255, .1);
  --plate-ink: #f2f5f4;
  --plate-soft: rgba(255, 255, 255, .56);
  --plate-lime: #a6ec62;
  --plate-red: #ff8a82;
  --plate-blue: #8fb8ff;

  /* ── 刻度与斜线填充：只表示区间 / 当前柱 / 慢操作 ─────────── */
  --tick: rgba(var(--shade), .22);
  --tick-strong: rgba(var(--shade), .5);
  --hatch-ink: rgba(var(--shade), .16);
  --hatch: repeating-linear-gradient(135deg, var(--hatch-ink) 0 1.5px, transparent 1.5px 6px);

  /* ── 仪器化排版 ───────────────────────────────────────────── */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --track-eyebrow: .14em;
  --fs-display-m: 28px;
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
}

/* ════════════════════════════════════════════════ 2. 令牌 · 深色（同一语义） */
:root.dark {
  color-scheme: dark;

  --color-fg-primary: #eef2f1;
  --color-fg-secondary: #b0babd;
  --color-fg-muted: #8d979a;
  --color-fg-faint: #6c7679;
  --color-fg-inverse: #ffffff;
  --color-fg-link: #8fb8ff;

  --color-border-subtle: rgba(255, 255, 255, .06);
  --color-border-default: rgba(255, 255, 255, .09);
  --color-border-strong: rgba(255, 255, 255, .16);
  --color-border-focus: #4c8dff;

  --color-primary: #4c8dff;
  --color-primary-hover: #3d7ff2;
  --color-primary-label: #8fb8ff;
  --color-primary-solid: #2f6fe4;
  --color-primary-solid-hover: #3d7ff2;
  --color-primary-solid-pressed: #2560cc;
  --color-primary-subtle: rgba(76, 141, 255, .16);
  --color-primary-border: rgba(76, 141, 255, .5);

  --color-success: #6ec024;
  --color-success-label: #9be35a;
  --color-success-subtle: rgba(130, 221, 45, .16);
  --color-warning: #e0a83c;
  --color-warning-label: #f0c56a;
  --color-warning-subtle: rgba(227, 168, 59, .16);
  --color-danger: #ff5a50;
  --color-danger-label: #ff8a82;
  --color-danger-subtle: rgba(255, 90, 80, .16);
  --color-info-label: #8fb8ff;
  --color-info-subtle: rgba(76, 141, 255, .14);

  --color-bg-canvas: #121517;
  --color-bg-stage: #0d0f10;
  --color-bg-panel: #1b1f21;
  --color-bg-panel-raised: #22262a;
  --color-bg-input: rgba(255, 255, 255, .04);
  --color-bg-hover: rgba(255, 255, 255, .05);
  --color-bg-selected: rgba(76, 141, 255, .16);
  --color-bg-overlay: rgba(0, 0, 0, .5);
  --color-bg-toast: rgba(30, 34, 37, .92);

  --color-grid-line: rgba(255, 255, 255, .05);
  --color-grid-axis: rgba(255, 255, 255, .12);
  --color-ghost-surface: rgba(255, 255, 255, .06);
  --color-ghost-edge: rgba(255, 255, 255, .1);
  --color-pin-bg: rgba(27, 31, 33, .94);
  --color-pin-border: rgba(255, 255, 255, .18);
  --color-pin-leader: rgba(255, 255, 255, .38);
  --color-pin-latin: #8d979a;

  --color-focus-ring: rgba(76, 141, 255, .85);
  --color-focus-ring-offset: #121517;

  --shade: 0, 0, 0;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .1);
  --glass-line: rgba(255, 255, 255, .1);
  --glass-line-soft: rgba(255, 255, 255, .07);

  --surface: linear-gradient(145deg, rgba(29, 33, 36, .98), rgba(25, 29, 31, .96));
  --surface-solid: #1b1f21;
  --rail-bg: rgba(22, 26, 28, .94);
  --pill-bg: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .05));
  --pill-inset: inset 0 -1px 0 rgba(0, 0, 0, .2);
  --float-bg: rgba(30, 34, 37, .9);
  --float-inset: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px 0 rgba(255, 255, 255, .07);
  --groove-bg: rgba(0, 0, 0, .22);
  --groove-inset: inset 0 1px 2px rgba(0, 0, 0, .28);
  --input-bg: rgba(255, 255, 255, .04);
  --hover-bg: rgba(255, 255, 255, .05);
  --press-bg: rgba(255, 255, 255, .08);
  --overlay: rgba(0, 0, 0, .5);
  --stage: #0b0d0e;
  --frame: #000;
  --canvas: #121517;

  --edge: inset 0 1px 0 rgba(255, 255, 255, .06);
  --edge-strong: inset 0 1px 0 rgba(255, 255, 255, .09);

  --plate-bg: rgba(8, 10, 11, .82);
  --plate-line: rgba(255, 255, 255, .1);

  --tick: rgba(255, 255, 255, .16);
  --tick-strong: rgba(255, 255, 255, .42);
  --hatch-ink: rgba(255, 255, 255, .12);
}

/* ════════════════════════════════════════════════ 3. 令牌 · 形状 / 高度 / 控件 */
:root {
  /* 圆角 4px 一档的 5 级（例外：胶囊 999px、小方块 5px） */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --button-radius: 12px;
  --tool-button-radius: 12px;
  --panel-radius: 18px;
  --search-input-radius: 12px;
  --kpi-tile-radius: 14px;
  --toast-radius: 18px;
  --pin-label-radius: 8px;

  /* 高度：统一「接触阴影 + 环境阴影」，不叠发光 */
  --shadow-card: 0 1px 2px rgba(46, 58, 62, .05), 0 5px 14px rgba(46, 58, 62, .04);
  --shadow-raised: 0 1px 3px rgba(46, 58, 62, .06), 0 12px 30px rgba(46, 58, 62, .055);
  --shadow-floating: 0 2px 6px rgba(46, 58, 62, .07), 0 22px 50px rgba(46, 58, 62, .08);
  --shadow-dock: 0 2px 6px rgba(46, 58, 62, .07), 0 18px 40px rgba(46, 58, 62, .1);
  --shadow-glow: 0 1px 2px rgba(20, 66, 148, .26), 0 8px 18px rgba(35, 109, 233, .22);
  --primitive-shadow-glow: 0 0 18px -4px rgba(35, 109, 233, .45);
  --primitive-shadow-dock: 0 18px 40px rgba(46, 58, 62, .1), 0 0 0 1px rgba(46, 58, 62, .06);
  --primitive-shadow-md: 0 6px 16px rgba(46, 58, 62, .08), 0 2px 4px rgba(46, 58, 62, .04);
  --primitive-shadow-lg: 0 16px 36px rgba(46, 58, 62, .11), 0 2px 6px rgba(46, 58, 62, .05);
  --primitive-shadow-sm: 0 2px 6px rgba(46, 58, 62, .06), 0 1px 2px rgba(46, 58, 62, .04);
  --primitive-shadow-xs: 0 1px 2px rgba(46, 58, 62, .06);

  /* 尺寸：顶栏与状态条略放，给读数留呼吸 */
  --size-topbar: 52px;
  --size-statusbar: 30px;
  --control-h: 36px;
  --control-h-sm: 30px;
  --button-height: 36px;
  --button-font-size: 13px;
  --search-input-height: 36px;
  --system-row-height: 34px;
  --table-row-height: 34px;

  /* 字重：scaffold 的标题比原系统更实 */
  --typography-h1-weight: 700;
  --typography-h2-weight: 680;
  --typography-h3-weight: 660;
  --typography-display-weight: 740;
  --typography-display-tracking: -.03em;
  --typography-data-tracking: .02em;
}

/* 深色档的阴影跟着变深 */
:root.dark {
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 5px 14px rgba(0, 0, 0, .2);
  --shadow-raised: 0 1px 3px rgba(0, 0, 0, .32), 0 12px 30px rgba(0, 0, 0, .28);
  --shadow-floating: 0 2px 6px rgba(0, 0, 0, .36), 0 22px 50px rgba(0, 0, 0, .42);
  --shadow-dock: 0 2px 6px rgba(0, 0, 0, .36), 0 18px 40px rgba(0, 0, 0, .38);
  --primitive-shadow-dock: 0 18px 40px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ════════════════════════════════════════════════ 4. 场景：舞台与画布 */
:root {
  /* 舞台 = 珍珠白底 + 两团静态漫射光（青柠 / 蓝），不参与动画 */
  --stage-shared-bg-gradient:
    radial-gradient(55% 45% at 92% 0%, rgba(130, 221, 45, .07), transparent 70%),
    radial-gradient(45% 40% at 18% 100%, rgba(35, 109, 233, .055), transparent 70%),
    radial-gradient(120% 90% at 50% 8%, #ffffff 0%, #eef2f3 72%);
  --stage-shared-floor-fade: linear-gradient(180deg, rgba(238, 242, 243, 0) 55%, rgba(225, 231, 229, .5) 100%);
  --stage-shared-contact-shadow: radial-gradient(50% 50% at 50% 50%, rgba(46, 58, 62, .18) 0%, rgba(46, 58, 62, 0) 70%);

  /* 画风只改舞台材质，不改 UI 骨架（与原设计系统一致） */
  --stage-pbr-rim-light: #236de9;
  --stage-pbr-ambient: rgba(255, 255, 255, .6);
  --stage-watercolor-paper-tint: #fdfbf7;
  --stage-watercolor-ambient: rgba(255, 255, 255, .74);
  --stage-bronze-paper-tint: #fbf7f0;
  --stage-bronze-key-light: #ffe7bf;
  --stage-bronze-accent: #b8860b;
}
:root.dark {
  --stage-shared-bg-gradient:
    radial-gradient(55% 45% at 92% 0%, rgba(130, 221, 45, .05), transparent 70%),
    radial-gradient(45% 40% at 18% 100%, rgba(76, 141, 255, .07), transparent 70%),
    radial-gradient(120% 90% at 50% 12%, #171b1e 0%, #090b0c 68%);
  --stage-shared-floor-fade: linear-gradient(180deg, rgba(9, 11, 12, 0) 55%, rgba(9, 11, 12, .85) 100%);
  --stage-shared-contact-shadow: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 70%);
  --stage-pbr-ambient: rgba(255, 255, 255, .1);
}