/* Opt-in foundation v0.2 (2026-10-06). Existing pages are migrated explicitly, never by global override.
   Geometry follows the approved main layout (docs/ui-system/main-layout-approved, 8dacedf).
   Production currently reads only --wb-control-sm and --wb-space-2 from this file (functional-controls.css, main-layout.css);
   both values are unchanged in v0.2. Mapping table: docs/ui-system/TOKENS.md. */
:root {
  /* Raw scale: 4px unit, 8px visible grid. */
  --wb-space-1: 4px; --wb-space-2: 8px; --wb-space-3: 12px;
  --wb-space-4: 16px; --wb-space-6: 24px; --wb-space-8: 32px;

  /* Control heights. Approved action / search / tree-row height is 32px (sm); account button is 40px (md). */
  --wb-control-sm: 32px; --wb-control-md: 40px; --wb-control-lg: 48px;
  --wb-control-default: var(--wb-control-sm);
  /* 控件档位（第二批，用户已确认）：标准 32 是默认；大 40 只给页面级主入口；紧凑 24 只用于悬浮提示内部。同一行的按钮、输入、下拉用同一档。 */
  --wb-control-standard: var(--wb-control-sm); --wb-control-large: var(--wb-control-md); --wb-control-compact: 24px;
  --wb-command-pad: 16px; --wb-command-pad-compact: 8px; --wb-command-min-width: 64px; --wb-command-gap: 8px; --wb-command-footer-gap: 16px;
  --wb-field-pad: 12px;
  /* 选项与导航行（第四批）：标准行 32（与已定版的侧栏树、筛选行一致），带图标的文件行 40，面包屑与分段切换里的段用紧凑 24。
     行内左右内边距 8，文字较多的导航与菜单行 12；菜单与浮层内边距按紧凑布局间距取 8（第七批起）。 */
  --wb-row-height: 32px; --wb-row-height-roomy: 40px; --wb-row-pad: 8px; --wb-row-pad-wide: 12px; --wb-menu-pad: var(--wb-panel-gap-compact);
  /* 开关与取值（第五批）：复选框 16；开关 32×16、滑钮 12；滑块轨道 4、滑钮 16。 */
  --wb-check-size: 16px; --wb-switch-width: 32px; --wb-switch-height: 16px; --wb-switch-knob: 12px; --wb-slider-track: 4px; --wb-slider-thumb: 16px;
  /* 标签与色块（第六批）：标签高 24 = 上下各 4 + 说明小字行高 16，左右 8，标签间距 4。 */
  --wb-chip-pad-block: 4px; --wb-chip-pad-inline: 8px; --wb-chip-gap: 4px;
  /* 间距刻度（第七批，用户已确认）：元素之间只用 4、8、16、24、32；12 只在控件内部。每种关系一个值。
     布局间距沿用主页面已定的规则：一般布局间距 2 格（--wb-panel-gap / --wb-panel-inset = 16），紧凑布局间距 1 格（--wb-panel-gap-compact = 8），
     用于面板与面板之间、面板内元素到面板边缘；菜单与浮层是紧凑面板，内边距 8；悬浮提示是一般面板，内边距 16。 */
  --wb-gap-icon: 8px; --wb-gap-inline: 8px; --wb-gap-label: 8px; --wb-gap-field: 16px; --wb-gap-section: 24px; --wb-float-pad: var(--wb-panel-inset);
  /* 图标（第八批，用户已确认）：布局只认图标槽，图稿可换。槽 5 个尺寸，与 src/ui/iconRegistry.ts 的 ICON_SLOTS 一致。
     图标按钮外框：标准 32、紧凑 24；行内微操作的点击范围 24。 */
  --wb-icon-sm: 12px; --wb-icon-md: 16px; --wb-icon-lg: 20px; --wb-icon-xl: 24px; --wb-icon-display: 40px;
  --wb-icon-button: var(--wb-control-standard); --wb-icon-button-compact: var(--wb-control-compact); --wb-icon-hit: 24px;
  /* 浮层与悬浮提示（第九批，用户已确认）。浮层贴着触发器出现：离触发器 8（紧凑，1 格），纯选项菜单内边距 8，最大高度 320，宽度不窄于触发器且不超过 320。
     悬浮提示挂在窗口右下角的堆叠容器里：离右、下各 16（一般，2 格），彼此间距 8（紧凑，1 格），统一宽 320，内边距 16。
     阴影各只有一种；质感以后在材质那一批统一调，这里先取现有的值。 */
  --wb-popover-offset: var(--wb-panel-gap-compact); --wb-popover-max-height: 320px; --wb-popover-max-width: 320px;
  --wb-float-edge: var(--wb-panel-gap); --wb-float-gap: var(--wb-panel-gap-compact); --wb-float-width: min(320px, calc(100vw - 2 * var(--wb-panel-gap)));
  --wb-shadow-popover: 4px 8px 24px #62595938, inset 0 1px 2px #fff9; --wb-shadow-float: 0 12px 36px #0003, inset 0 1px 0 #fff8;
  --wb-motion-popover-in: var(--wb-motion-base) var(--wb-ease-enter); --wb-motion-popover-out: var(--wb-motion-fast) var(--wb-ease-exit);
  /* 弹窗外壳（第三批，用户已确认）：全部取 8 的倍数，弹窗内的边缘落在以弹窗左上角为原点的 8px 网格上。
     内边距 24；标题区占一个 32 大格，关闭按钮 32 与标题同行；标题到内容 16；宽度四档；离窗口边缘至少 16。 */
  --wb-dialog-pad: 24px; --wb-dialog-title-gap: 16px; --wb-dialog-margin: 16px;
  --wb-dialog-width-sm: min(400px, calc(100vw - 2 * var(--wb-dialog-margin))); --wb-dialog-width-md: min(560px, calc(100vw - 2 * var(--wb-dialog-margin)));
  --wb-dialog-width-lg: min(720px, calc(100vw - 2 * var(--wb-dialog-margin))); --wb-dialog-width-xl: min(1040px, calc(100vw - 2 * var(--wb-dialog-margin)));
  --wb-dialog-max-height: calc(100vh - 2 * var(--wb-dialog-margin));
  /* 弹窗出现：所有弹窗与遮罩用同一段柔和动画。 */
  /* 动效刻度（第十批，用户已确认）。时长 4 档：快 120（悬停与状态反馈、浮层消失）、标准 180（小元素出现、淡入淡出、弹窗与悬浮提示消失）、
     慢 240（弹窗、悬浮提示、面板出现）、位移 320（展开、收起、位置移动）。曲线 2 条：进入（减速）与退出（平滑）。
     越大的东西越慢，消失比出现快一档。整体调快或调慢只改这 4 个时长。
     不在刻度里的：循环与装饰动画；专门设计的效果（预览关灯、预览两侧面板滑入、卡片封面显现、收藏星标与卡片名牌的玻璃效果、
     灵感色卡、发光添加按钮）。用户说明这些以后由他调整，本批没有动。 */
  --wb-motion-fast: 120ms; --wb-motion-base: 180ms; --wb-motion-slow: 240ms; --wb-motion-move: 320ms;
  --wb-ease-enter: cubic-bezier(.22,.7,.24,1); --wb-ease-exit: ease;
  --wb-motion-dialog: var(--wb-motion-slow) var(--wb-ease-enter);
  /* 弹窗关闭：比出现略快的淡出下沉。 */
  --wb-motion-dialog-out: var(--wb-motion-base) var(--wb-ease-exit);

  /* Approved frame: outer margin and panel gap 16px; compact gap 8px; content baseline 16px inside a panel. */
  --wb-page-inset: 16px;
  --wb-panel-gap: 16px;
  --wb-panel-gap-compact: 8px;
  --wb-panel-inset: 16px;

  /* Approved type: pool title 24px font / 24px line (three 8px cells). */
  --wb-title-size: 24px; --wb-title-line: 24px;

  /* Motion is still a draft. */
  --wb-motion-fast: 120ms; --wb-motion-normal: 200ms;

  /* ── 元素类变量（用户 2026-10-06 确认，见 docs/ui-system/classes/01-TEXT-AND-SURFACES.md）──
     样式源码里的字号、行高、字重、圆角都引用这里；调一类只改这里一处。
     数值自带对用户设置的响应：--ui-font-scale（文字大小 / 14）、--ui-radius-factor（圆角 / 100）、--ui-font-weight（基准字重）。 */
  /* T 文字层级：字号 / 行高。行高落在 4px 网格。 */
  --wb-type-display: calc(34px * var(--ui-font-scale, 1));   --wb-type-display-line: calc(48px * var(--ui-font-scale, 1));   /* T1 展示标题：准备页问候 */
  --wb-type-page: calc(24px * var(--ui-font-scale, 1));      --wb-type-page-line: calc(24px * var(--ui-font-scale, 1));      /* T2 页面标题：资产池标题（已定版） */
  --wb-type-window: calc(20px * var(--ui-font-scale, 1));    --wb-type-window-line: calc(32px * var(--ui-font-scale, 1));    /* T3 窗口标题：顶栏库名（已定版） */
  --wb-type-dialog: calc(20px * var(--ui-font-scale, 1));    --wb-type-dialog-line: calc(32px * var(--ui-font-scale, 1));    /* T4 弹窗标题 */
  --wb-type-section: calc(16px * var(--ui-font-scale, 1));   --wb-type-section-line: calc(24px * var(--ui-font-scale, 1));   /* T5 分区标题 */
  --wb-type-body: calc(14px * var(--ui-font-scale, 1));      --wb-type-body-line: calc(24px * var(--ui-font-scale, 1));      /* T6 正文 */
  --wb-type-control: calc(14px * var(--ui-font-scale, 1));   --wb-type-control-line: calc(24px * var(--ui-font-scale, 1));   /* T7 控件文字 */
  --wb-type-secondary: calc(12px * var(--ui-font-scale, 1)); --wb-type-secondary-line: calc(16px * var(--ui-font-scale, 1)); /* T8 辅助文字 */
  --wb-type-caption: calc(11px * var(--ui-font-scale, 1));   --wb-type-caption-line: calc(16px * var(--ui-font-scale, 1));   /* T9 说明小字 */
  /* 字重只有两档：常规跟随用户的基准字重，强调在基准上加一档。 */
  --wb-weight-regular: var(--ui-font-weight, 300);
  --wb-weight-strong: calc(var(--ui-font-weight, 300) + 100);
  /* 圆角刻度 4 / 8 / 12 / 16 / 24 */
  --wb-radius-r4: calc(4px * var(--ui-radius-factor, 1));   --wb-radius-r8: calc(8px * var(--ui-radius-factor, 1));
  --wb-radius-r12: calc(12px * var(--ui-radius-factor, 1)); --wb-radius-r16: calc(16px * var(--ui-radius-factor, 1));
  --wb-radius-r24: calc(24px * var(--ui-radius-factor, 1));
  /* G 表面与各类元素的圆角。外层大、内层小。 */
  --wb-radius-dialog: var(--wb-radius-r24);      /* G4 弹窗 */
  --wb-radius-card: var(--wb-radius-r24);        /* G3 资产卡片 */
  --wb-radius-panel: var(--wb-radius-r16);       /* G1 窗口面板 */
  --wb-radius-well: var(--wb-radius-r16);        /* G2 凹槽 / 内容池 */
  --wb-radius-float: var(--wb-radius-r16);       /* G6 悬浮提示 */
  --wb-radius-tile: var(--wb-radius-r16);        /* F2 选择卡片 */
  --wb-radius-popover: var(--wb-radius-r12);     /* G5 浮层 / 菜单 */
  --wb-radius-card-small: var(--wb-radius-r12);  /* G3 小卡片、字段块 */
  --wb-radius-well-inner: var(--wb-radius-r12);  /* 面板内部的小凹槽 */
  --wb-radius-note: var(--wb-radius-r12);        /* G7 说明块 */
  --wb-radius-row: var(--wb-radius-r8);          /* C 选项行、菜单选项 */
  --wb-radius-chip: var(--wb-radius-r4);         /* E 小圆角标签、徽标 */
  --wb-radius-pill: 999px;                       /* E 胶囊标签 */
  /* A、B、D 控件圆角：用户 2026-10-06 确认取 8（弹窗 24 > 面板 16 > 浮层 12 > 控件 8 > 小标签 4）。 */
  --wb-radius-control: var(--wb-radius-r8);

  /* Semantic colours. Text / surface / accent read each theme's existing variables, so no new colour is introduced.
     Final palette per theme is still pending user design; status colours keep one meaning across themes. */
  --wb-text-primary: var(--ink, #4c5355);
  /* 文字颜色的 5 个语义（第十一批，用户已确认）。主文字沿用各主题的 --ink（用户在设置里选的文本颜色也作用在它上面）；
     辅助文字、弱化文字取各主题里原先用得最多的那一种灰，没有新调颜色。危险与强调跟随状态色与重点色。
     各主题的取值见本文件末尾的主题段。旧变量 --muted 仍被部分规则直接引用，它不等于这里的辅助文字。 */
  --wb-text-secondary: #737272;
  --wb-text-tertiary: #969595;
  --wb-text-danger: var(--wb-status-danger);
  --wb-text-accent: var(--accent, #6b9bdf);
  /* 状态（第十一批）：悬停只提亮，全软件一个幅度；禁用统一不透明度。 */
  --wb-hover-brightness: 1.03;
  --wb-disabled-opacity: .5;
  --wb-surface-page: #e9e8e8;
  --wb-surface-panel: var(--plastic, #f4f3f2);
  --wb-border: #c9cbcd;
  --wb-accent-primary: var(--accent, #6b9bdf);
  --wb-accent-secondary: #a79bdb;
  --wb-focus-ring: var(--wb-accent-primary);
  --wb-status-danger: #b44f3f; --wb-status-warning: #a36c22; --wb-status-success: #36796a;
}
/* 文字层级的基础规则：浏览器默认会把 small 缩成相对字号、把标题和 strong 设成粗体，这里统一到层级里。
   优先级最低（:where），任何组件规则都可以覆盖。 */
:where(small) { font-size: var(--wb-type-caption); line-height: var(--wb-type-caption-line); }
:where(h1, h2, h3, h4, h5, h6, strong, b) { font-weight: var(--wb-weight-strong); }

/* Theme-specific values that have no existing shared variable. Values copied from the current theme files. */
html[data-theme="dark"] { --wb-surface-page: #262628; --wb-border: #ffffff13; }
html[data-theme="sandstone-fire"] { --wb-surface-page: var(--cw-ground); --wb-border: #dce0e366; --wb-text-secondary: #555b62; --wb-text-tertiary: #8a8989; }

.wb-stack { display:flex; flex-direction:column; gap:var(--wb-space-4); min-width:0; }
.wb-row { display:flex; align-items:center; gap:var(--wb-space-2); min-width:0; flex-wrap:wrap; }
.wb-panel { padding:var(--wb-panel-inset); min-width:0; min-height:0; box-sizing:border-box; }
.wb-button { box-sizing:border-box; min-height:var(--wb-control-default); padding:0 var(--wb-space-4); display:inline-flex; align-items:center; justify-content:center; gap:var(--wb-space-2); border:1px solid var(--wb-border); border-radius:var(--wb-radius-control); background:var(--wb-surface-panel); color:var(--wb-text-primary); font:inherit; cursor:pointer; }
.wb-button:focus-visible,.wb-search:focus-within { outline:2px solid var(--wb-focus-ring); outline-offset:2px; }
.wb-button:disabled { opacity:.5; cursor:default; }
.wb-button[data-intent=primary] { border-color:var(--wb-accent-primary); }
.wb-button[data-intent=danger] { color:var(--wb-status-danger); }
.wb-button[data-selected=true]::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--wb-accent-primary); flex:none; }
.wb-button[data-size=sm] { min-height:var(--wb-control-sm); }
.wb-button[data-size=md] { min-height:var(--wb-control-md); }
.wb-button[data-size=lg] { min-height:var(--wb-control-lg); }
.wb-search { box-sizing:border-box; display:flex; align-items:center; gap:var(--wb-space-2); min-height:var(--wb-control-default); min-width:0; padding:0 var(--wb-space-2); border:1px solid var(--wb-border); border-radius:var(--wb-radius-control); }
.wb-search input { flex:1; min-width:0; border:0; background:transparent; color:inherit; font:inherit; outline:none; }