:root {
   color-scheme: light dark;

   --color-canvas: light-dark(oklch(1 0 0), oklch(0.21 0.006 264));
   --color-charcoal-ink: light-dark(oklch(0.21 0.006 264), oklch(0.93 0.005 264));
   --color-graphite: light-dark(oklch(0.36 0.008 264), oklch(0.7 0.006 264));
   --color-slate: light-dark(oklch(0.52 0.008 264), oklch(0.7 0.006 264));
   --color-mist: light-dark(oklch(0.89 0.005 264), oklch(0.36 0.008 264));
   --color-cloud-shadow: light-dark(oklch(0.81 0.005 264), oklch(0.5 0.008 264));
   --color-chatmoe-blue: light-dark(oklch(75.252% 0.14905 235.247), oklch(58.258% 0.18569 254.795));
   --color-destructive: light-dark(oklch(0.55 0.19 27), oklch(0.78 0.14 27));
   /* 首月特惠等促销标记：刻意不用品牌蓝，避免和「推荐」标记糊成一片；
      底色与文字成对给出，两种主题下都能保证小字号下的对比度 */
   --color-offer: light-dark(oklch(0.42 0.13 52), oklch(0.8 0.145 70));
   --color-on-offer: light-dark(oklch(0.98 0.02 80), oklch(0.2 0.04 52));

   --surface-canvas: light-dark(oklch(1 0 0), oklch(0 0 0));
   --surface-card: light-dark(oklch(0.96 0.002 264), oklch(0.25 0.004 264));
   --surface-scrim: light-dark(oklch(0.21 0.006 264 / 0.5), oklch(0 0 0 / 0.5));
   --surface-focus: light-dark(oklch(0.95 0.002 264), oklch(0.2 0.004 264));

   --font-display: 'Google Sans Display', Inter, ui-sans-serif, system-ui, sans-serif;
   --font-text: 'Google Sans Text', Inter, ui-sans-serif, system-ui, sans-serif;

   --text-caption: 12px;
   --leading-caption: 1.5;
   --tracking-caption: 0.432px;

   --text-body-sm: 14px;
   --leading-body-sm: 1.5;
   --tracking-body-sm: 0.238px;

   --text-body: 16px;
   --leading-body: 1.56;
   --tracking-body: 0.272px;

   --text-subheading: 18px;
   --leading-subheading: 1.67;
   --tracking-subheading: 0.108px;

   --text-heading-sm: 22px;
   --leading-heading-sm: 1.29;
   --tracking-heading-sm: -0.132px;

   --text-heading: 28px;
   --leading-heading: 1.2;
   --tracking-heading: -0.168px;

   --text-heading-lg: 48px;
   --leading-heading-lg: 1.15;
   --tracking-heading-lg: -0.288px;

   --text-display: 80px;
   --leading-display: 1.09;
   --tracking-display: -0.8px;

   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-bold: 700;

   --spacing-8: 8px;
   --spacing-16: 16px;
   --spacing-24: 24px;
   --spacing-32: 32px;
   --spacing-40: 40px;
   --spacing-48: 48px;
   --spacing-80: 80px;
   --spacing-88: 88px;
   --spacing-120: 120px;
   --spacing-216: 216px;

   --radius-md: 4px;
   --radius-lg: 8px;
   --radius-2xl: 16px;
   --radius-3xl: 24px;
   --radius-3xl-2: 28px;
   --radius-full: 200px;
   --radius-full-2: 300px;

   --content-max-width: 768px;
   --page-max-width: 1200px;
   --section-gap: 80px;
   --card-padding: 40px;
   --element-gap: 16px;
}

/* ---------------------------------------------------------------------------
   以下为运营台扩展令牌。上半部分是 app 的设计令牌原样复制（保持两端观感一致），
   这一段只补后台才需要的东西：语义状态色、细线、层级表面、等宽数字与信息密度尺。

   为什么单独放一个文件而不去改 app 的 variables.css：两个 Worker 各有各的部署
   产物，后台引入「表格密度」这类只对控制台有意义的令牌，不该反向影响聊天端。
   --------------------------------------------------------------------------- */
:root {
   /* 语义状态色。对比度按小字号（12px）正文要求取值，两种主题下都够用 */
   --color-success: light-dark(oklch(0.52 0.12 155), oklch(0.78 0.13 158));
   --color-warning: light-dark(oklch(0.56 0.13 62), oklch(0.82 0.13 78));
   --color-critical: light-dark(oklch(0.55 0.19 27), oklch(0.78 0.14 27));
   --color-neutral: light-dark(oklch(0.52 0.008 264), oklch(0.7 0.006 264));

   /* 细线：后台的表格靠线分层，不靠投影，所以需要比 --color-mist 更弱的一档 */
   --border-subtle: light-dark(oklch(0.925 0.003 264), oklch(0.3 0.005 264));
   --border-strong: light-dark(oklch(0.85 0.005 264), oklch(0.4 0.006 264));

   /* 层级表面：raised 抬在 canvas 之上，sunken 用于侧栏与表头 */
   --surface-raised: light-dark(oklch(1 0 0), oklch(0.28 0.005 264));
   --surface-sunken: light-dark(oklch(0.972 0.002 264), oklch(0.17 0.004 264));
   --surface-hover: light-dark(oklch(0.962 0.004 264), oklch(0.315 0.006 264));
   --surface-active: light-dark(oklch(0.94 0.006 264), oklch(0.35 0.008 264));

   --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

   /* 密度尺：12px 的微标签 + 46px 行高，是「看得多」和「看得清」之间的折中。
      CJK 不做负字距，微标签也不做大写转换（中文没有大小写） */
   --text-micro: 11px;
   --leading-micro: 1.45;
   --tracking-micro: 0.4px;

   --rail-width: 228px;
   --rail-width-compact: 68px;
   --topbar-height: 60px;
   --row-height: 46px;
   --drawer-width: 560px;

   --shadow-pop: 0 1px 2px light-dark(oklch(0.21 0.006 264 / 0.06), oklch(0 0 0 / 0.4)),
      0 16px 40px -12px light-dark(oklch(0.21 0.006 264 / 0.22), oklch(0 0 0 / 0.7));
   --duration-fast: 0.12s;
   --duration-base: 0.22s;
   --ease-out: cubic-bezier(0.2, 0, 0, 1);
}