/* 设计令牌:颜色 / 间距 / 圆角 / 字号 / 阴影。页面与组件只引用这些变量,不写魔法数值。
   深色为默认;浅色通过 <html data-theme="light"> 覆盖同名变量。 */
:root {
  /* 字体:系统字体栈,覆盖中文与泰文 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", "Sukhumvit Set", "Thonburi", "Leelawadee UI", "Noto Sans Thai",
    system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 字号 */
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 间距(4px 基准) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* 圆角 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* 布局尺寸 */
  --sidebar-w: 216px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 56px;
  --content-max: 1560px;
  --control-h: 32px;
  --control-h-sm: 26px;

  /* 动效 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* z 轴 */
  --z-sticky: 5;
  --z-topbar: 20;
  --z-sidebar: 30;
  --z-overlay: 100;
  --z-toast: 200;
}

/* ───── 深色(默认) ───── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f13;
  --bg-sunken: #0a0c0f;
  --surface: #14171d;
  --surface-2: #1a1e26;
  --surface-3: #222734;
  --surface-hover: #1e232d;
  --border: #252a35;
  --border-strong: #343b49;
  --text: #e5e8ee;
  --text-2: #a3abba;
  --text-3: #6f7788;
  --text-inverse: #0d0f13;

  --accent: #6b93ff;
  --accent-strong: #8aa9ff;
  --accent-soft: rgba(107, 147, 255, .14);
  --focus: #8aa9ff;

  /* 语义色:好 / 警告 / 坏 / 中性 */
  --good: #3fbf7f;
  --good-soft: rgba(63, 191, 127, .14);
  --warn: #e3b341;
  --warn-soft: rgba(227, 179, 65, .14);
  --bad: #f0625d;
  --bad-soft: rgba(240, 98, 93, .14);
  --neutral: #8b93a3;
  --neutral-soft: rgba(139, 147, 163, .14);

  /* 诊断维度 + 毛利:全站固定色 */
  --dim-availability: #a584f5;
  --dim-traffic: #3fb8cc;
  --dim-conversion: #e57fa6;
  --dim-fulfillment: #ec9a4d;
  --dim-margin: #b9c54d;
  --dim-healthy: var(--good);

  /* 平台 */
  --plat-grab: #3fbf7f;
  --plat-lineman: #6fc26b;
  --plat-grab-bar: #3fa36f;
  --plat-lineman-bar: #c9d35a;

  /* 图表 */
  --chart-1: #6b93ff;
  --chart-2: #3fbf7f;
  --chart-3: #e3b341;
  --chart-grid: #1f2430;
  --chart-axis: #7d8597;
  --chart-nodata: #2a2f3b;
  --heat-0: #171b23;
  --heat-1: #22304d;
  --heat-2: #3b5eb8;
  --heat-3: #7fa2ff;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, .02), 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --scrim: rgba(4, 6, 10, .62);
  --skeleton-a: #191d25;
  --skeleton-b: #222733;
}

/* ───── 浅色 ───── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --bg-sunken: #eceef2;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f4;
  --surface-hover: #f1f3f7;
  --border: #e1e4ea;
  --border-strong: #cdd2db;
  --text: #171a21;
  --text-2: #545c6b;
  --text-3: #858d9c;
  --text-inverse: #ffffff;

  --accent: #3563e9;
  --accent-strong: #2449c7;
  --accent-soft: rgba(53, 99, 233, .10);
  --focus: #3563e9;

  --good: #1e8e57;
  --good-soft: rgba(30, 142, 87, .11);
  --warn: #a8740a;
  --warn-soft: rgba(196, 139, 16, .13);
  --bad: #d23c37;
  --bad-soft: rgba(210, 60, 55, .10);
  --neutral: #6b7383;
  --neutral-soft: rgba(107, 115, 131, .11);

  --dim-availability: #7a55d8;
  --dim-traffic: #16889c;
  --dim-conversion: #c24c7c;
  --dim-fulfillment: #c56c1c;
  --dim-margin: #7b8a12;

  --plat-grab: #1e8e57;
  --plat-lineman: #4f9a34;
  --plat-grab-bar: #2f9a66;
  --plat-lineman-bar: #a3b021;

  --chart-1: #3563e9;
  --chart-2: #1e8e57;
  --chart-3: #b88210;
  --chart-grid: #eceef2;
  --chart-axis: #7b8392;
  --chart-nodata: #e4e7ec;
  --heat-0: #f1f3f7;
  --heat-1: #cfdbfb;
  --heat-2: #7896ee;
  --heat-3: #2449c7;

  --shadow-1: 0 1px 2px rgba(20, 25, 35, .06);
  --shadow-2: 0 12px 32px rgba(20, 25, 35, .16), 0 2px 6px rgba(20, 25, 35, .08);
  --scrim: rgba(20, 24, 32, .38);
  --skeleton-a: #eceef2;
  --skeleton-b: #f6f7f9;
}