/* 工作类页面奶油面（UI 方案 §4）：创作台 / ui-system / ui-copy 等使用 --product-* 变量的页面。
   把 --product-* 全部指向唯一 token（lingscan-tokens.css），compose.css 等无需逐处改。
   加载顺序：product-ui-tokens.css → lingscan-tokens.css → surface-product.css → (页面自己的 css)。*/

:root {
  color-scheme: light;

  --product-canvas: var(--canvas);
  --product-panel: var(--sheet);
  --product-panel-raised: var(--canvas-sunk);
  --product-panel-muted: var(--canvas-sunk);
  --product-border: var(--line);
  --product-border-strong: var(--line-strong);
  --product-text: var(--text);
  --product-text-secondary: var(--text-2);
  --product-text-muted: var(--mute);

  /* 默认主按钮 = 墨按钮；黄铜只给「承诺动作」 */
  --product-accent: var(--ink-btn);
  --product-accent-hover: #3f3a33;
  --product-accent-soft: var(--brass-soft);
  --product-accent-ink: var(--on-ink);

  --product-warning: var(--warn);
  --product-danger: var(--danger);
  --product-success: var(--ok);
  --product-focus: 0 0 0 2px var(--brass);

  --product-radius-control: var(--r-ctl);
  --product-radius-panel: var(--r-card);
  --product-radius-pill: 999px; /* 仅状态徽标/开关使用 */
  --product-shadow-float: 0 8px 24px rgba(28, 25, 21, 0.12);

  --product-font-ui: var(--f-latin);
  --product-font-display: var(--f-serif);
  --product-font-mono: var(--f-mono);

  /* 旧深色别名（--ink-* / --paper-*）同步回奶油面，避免残留深底 */
  --ink-950: var(--canvas);
  --ink-900: var(--sheet);
  --ink-800: var(--canvas-sunk);
  --ink-700: var(--line-strong);
  --paper-100: var(--text);
  --paper-300: var(--text-2);
  --paper-500: var(--mute);
  --signal: var(--ink-btn);
  --signal-press: #3f3a33;
  --on-signal: var(--on-ink);
}

html, body { background: var(--canvas); color: var(--text); }

/* 承诺动作（购买/支付/确认生成）才用黄铜 */
/* 特异性刻意高于页面自己的 .button-primary（后加载的 compose.css 等） */
button[data-cta="commit"], a[data-cta="commit"], .btn-brass {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--brass-ink);
  font-weight: 600;
}
button[data-cta="commit"]:hover:not(:disabled), a[data-cta="commit"]:hover, .btn-brass:hover {
  background: var(--brass-hover);
  border-color: var(--brass-hover);
}
