/*
 * @dayan/design-tokens — 四端（画布 / 对话 / API 平台 / 工作流）唯一设计令牌真源。
 * 主题：neutral paper + ink。register=product（界面服务任务，数据是主角，不抢戏）。
 *
 * 原则（impeccable / product register）：
 *  - 无装饰渐变、无玻璃拟态、无通用蓝、无大数字渐变卡。克制：强调色仅用于主操作/选中/状态。
 *  - 颜色用 hex/rgba（非 oklch）：部分内嵌浏览器/旧 WebView（企业微信等）不支持 oklch()，否则强调色整体失效。
 *  - 正文对比度 ≥ 4.5:1；数字用 tabular-nums。亮/暗共用 [data-theme="dark"] 单一开关。
 *
 * 命名是唯一的（不再有 --fs-* / --font-size-* / --primary-500 多套并存）：
 *  字号 --font-size-*  行高 --line-*  间距 --space-*  圆角 --radius-*  阴影 --shadow-*
 *  动效 --motion-* + --ease-standard  主色 --primary*  表面 --surface-*  文字 --text-*  边框 --border-*
 *
 * 画布编辑器专用令牌（--canvas-* / --node-*）不在此处：它们是画布单端的局部语言，留在画布 global.scss。
 */

:root {
  /* ── 表面层（中性暖纸；面板比内容区略亮，侧栏/工具条自成一层）── */
  --surface-page: #f3f3f2;
  --surface-sidebar: #fafaf9;
  --surface-panel: #fafaf9;
  --surface-panel-muted: #f0f0ee;
  --surface-raised: #fdfdfc;
  --surface-floating: #fdfdfc;
  --surface-input: #fdfdfc;
  --surface-hover: #eeeeeb;
  --surface-active: #e8e9e7;
  --surface-scrim: rgba(23, 25, 24, 0.42);

  /* ── 文字（水墨）── */
  --text-primary: #171918;
  --text-secondary: #555a57;
  --text-tertiary: #7b817d;
  --text-disabled: #a4a8a5;
  --text-on-accent: #fafaf9; /* 强调色（主/红/绿）底上的固定浅字，不随主题变 */
  --text-inverse: #fafaf9;

  /* ── 边框 ── */
  --border-soft: #e5e5e2;
  --border-default: #d5d6d2;
  --border-strong: #bfc1bd;
  --border-focus: rgba(38, 41, 39, 0.54);

  /* ── 主色（ink）。仅用于主操作和焦点，避免低成本青色铺满界面。── */
  --primary: #262927;
  --primary-hover: #171918;
  --primary-strong: #171918;
  --primary-bg: #e8e9e7;
  --primary-bg-soft: #f0f0ee;
  --primary-ring: rgba(38, 41, 39, 0.28);
  --primary-ring-soft: rgba(38, 41, 39, 0.14);

  /* ── 语义色（每色配浅底，用于标签/告警；不靠颜色单通道，需配文字）── */
  --success: #1b683e;
  --success-bg: #e6f5ec;
  --warning: #8a5a1e;
  --warning-bg: #faefdd;
  --danger: #a23c39;
  --danger-bg: #fdeae7;
  --info: #1f6a96;
  --info-bg: #e3f1fb;

  /* ── 中性强调（分类标签用，克制）── */
  --accent-violet: #5a52a8;
  --accent-violet-bg: #ececfb;

  /* ── 字体 ── */
  --font-sans: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-brand: "Ma Shan Zheng", "Noto Serif SC", "STKaiti", "KaiTi", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── 字阶（固定 px，product 不用流体；步进 ~1.15-1.25）── */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --line-tight: 1.2;
  --line-normal: 1.45;
  --line-relaxed: 1.65;

  /* ── 间距 ── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── 页面容器留白（响应式但克制）── */
  --page-padding: 24px;
  --page-padding-tight: 16px;

  /* ── 六端侧栏壳层（Vue/Lit 共用；业务端不得另造尺寸）── */
  --shell-sidebar-width: 232px;
  --shell-sidebar-collapsed-width: 56px;
  --shell-sidebar-mobile-width: min(82vw, 280px);
  --shell-sidebar-breakpoint: 960px; /* 文档/脚本读取；CSS media query 仍需使用字面量 */
  --shell-sidebar-padding-x: 16px;
  --shell-sidebar-item-padding-y: 7px;
  --shell-sidebar-item-padding-x: 8px;
  --shell-sidebar-icon-size: 18px;
  --shell-sidebar-item-gap: 2px;
  --shell-sidebar-group-gap: 10px;
  --shell-sidebar-section-gap: 10px;
  --shell-sidebar-section-divider-offset: -5px;
  --shell-sidebar-header-height: 52px;
  --shell-sidebar-platform-max-height: 42dvh;
  --shell-topbar-height: 64px;
  --shell-sidebar-active-bg: var(--surface-active);
  --shell-sidebar-active-color: var(--text-primary);
  --shell-sidebar-focus-color: var(--border-focus);
  --project-index-item-height: 56px;

  /* ── 圆角 ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  /* ── 阴影（柔，单层墨色；flat-by-default，阴影是状态响应而非默认装饰）── */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.035);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
  --focus-ring: 0 0 0 3px var(--primary-ring-soft);

  /* ── 动效（150-250ms 区间；ease-out 指数曲线，无回弹）── */
  --motion-fast: 0.13s;
  --motion-base: 0.19s;
  --motion-slow: 0.24s;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── z 轴语义层级（dropdown → sticky → popover → modal → toast → tooltip）── */
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 1000;
  --z-popover: 1100;
  --z-modal-backdrop: 1900;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-tooltip: 3100;
}

/* ════════════════════════ 暗色（手动开关 [data-theme="dark"]）════════════════════════ */
:root[data-theme="dark"] {
  --surface-page: #151716;
  --surface-sidebar: #1b1d1c;
  --surface-panel: #1b1d1c;
  --surface-panel-muted: #222422;
  --surface-raised: #262927;
  --surface-floating: rgba(27, 29, 28, 0.97);
  --surface-input: #222422;
  --surface-hover: #2a2d2b;
  --surface-active: #303330;
  --surface-scrim: rgba(0, 0, 0, 0.58);

  --text-primary: #f1f2ef;
  --text-secondary: #b9bdb9;
  --text-tertiary: #878c88;
  --text-disabled: #606561;
  --text-on-accent: #171918;
  --text-inverse: #171918;

  --border-soft: rgba(154, 166, 180, 0.16);
  --border-default: rgba(154, 166, 180, 0.24);
  --border-strong: rgba(184, 194, 210, 0.34);
  --border-focus: rgba(226, 230, 226, 0.58);

  /* 主色（dark ink inverse）*/
  --primary: #e5e7e3;
  --primary-hover: #f1f2ef;
  --primary-strong: #f1f2ef;
  --primary-bg: #303330;
  --primary-bg-soft: #252825;
  --primary-ring: rgba(229, 231, 227, 0.28);
  --primary-ring-soft: rgba(229, 231, 227, 0.16);

  --success: #79ad84;
  --success-bg: #18251d;
  --warning: #d7a760;
  --warning-bg: #2c2417;
  --danger: #e18479;
  --danger-bg: #2a1d1b;
  --info: #77a9c8;
  --info-bg: #17242d;

  --accent-violet: #a59cf0;
  --accent-violet-bg: #1f1d33;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.34);
  --focus-ring: 0 0 0 3px var(--primary-ring-soft);

  color-scheme: dark;
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

@media (max-height: 480px) {
  :root {
    --shell-sidebar-platform-max-height: 28dvh;
  }
}

@media (max-width: 720px) {
  :root {
    --page-padding: 16px;
    --page-padding-tight: 12px;
    --shell-topbar-height: 52px;
  }
}