/* 品哨 · shared visual vocabulary for the web workspace and public surfaces. */
:root {
  color-scheme: light;
  --ui-font: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --ui-bg: #f5f7f9;
  --ui-surface: #fff;
  --ui-soft: #f0f3f6;
  --ui-text: #1f2b37;
  --ui-muted: #607080;
  --ui-border: #dce3e8;
  --ui-border-strong: #b9c6cf;
  --ui-primary: #0f6e56;
  --ui-primary-hover: #0b5845;
  --ui-primary-soft: #edf6f2;
  --ui-success: #147258;
  --ui-success-soft: #edf7f2;
  --ui-warning: #956212;
  --ui-warning-soft: #fff7e6;
  --ui-danger: #b42318;
  --ui-danger-soft: #fff1ef;
  --ui-info: #245a91;
  --ui-info-soft: #edf4fb;
  --ui-radius: 8px;
  --ui-control-radius: 6px;
  --ui-shadow-popover: 0 8px 28px rgba(31,43,55,.14);
  --ui-shadow-dialog: 0 20px 60px rgba(31,43,55,.22);
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --sidebar-w: 216px;
  /* Existing pages keep their business selectors while sharing these values. */
  --primary: var(--ui-primary);
  --primary-light: #d8eee4;
  --primary-bg: var(--ui-primary-soft);
  --accent: var(--ui-primary);
  --accent-soft: var(--ui-primary-soft);
  --green: var(--ui-success);
  --green-bg: var(--ui-success-soft);
  --green-border: #b9dacb;
  --red: var(--ui-danger);
  --red-bg: var(--ui-danger-soft);
  --red-border: #efc4bd;
  --orange: var(--ui-warning);
  --yellow: var(--ui-warning);
  --yellow-bg: var(--ui-warning-soft);
  --yellow-border: #e8d3a6;
  --gray: var(--ui-muted);
  --gray-l: var(--ui-muted);
  --gray-light: var(--ui-soft);
  --gray-border: var(--ui-border);
  --text: var(--ui-text);
  --text-secondary: #455565;
  --text-muted: var(--ui-muted);
  --bg: var(--ui-bg);
  --card: var(--ui-surface);
  --radius: var(--ui-radius);
  --radius-sm: var(--ui-control-radius);
  --shadow: none;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-stat: 26px;
}
::selection { background: #cde6db; color: #123e30; }
:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; }
input, textarea { caret-color: var(--ui-primary); }
* { scrollbar-width: thin; scrollbar-color: #bac6ce transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}