/* speedupai 设计令牌 —— shadcn token 命名约定（MIT），值按本项目调整
 *
 * 为什么用 oklch 不用 hex：同一 lightness 下不同色相的视觉明度一致，
 * 调状态色时不会出现「黄色看着比蓝色亮一截」的问题。
 *
 * 为什么不引 Tailwind：我们只需要这十几个变量，手写 CSS 就够。
 * 引构建管线会破掉「无 JS build」这条约定。
 */

:root {
  /* --- 灰阶骨架（chroma = 0，不带色倾向）--- */
  --background: oklch(99% 0 0);
  --foreground: oklch(20% 0 0);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(20% 0 0);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(20% 0 0);
  --primary: oklch(25% 0 0);
  --primary-foreground: oklch(98% 0 0);
  --secondary: oklch(96% 0 0);
  --secondary-foreground: oklch(25% 0 0);
  --muted: oklch(96% 0 0);
  --muted-foreground: oklch(50% 0 0);
  --accent: oklch(95% 0 0);
  --accent-foreground: oklch(25% 0 0);
  /* 边框分两档 —— 这两件事的无障碍要求不同，shadcn 把它们设成同值是偷懒：
   *
   * --border  卡片轮廓、分割线。属于「分组容器」，WCAG 1.4.11 不管它
   *           （该条只管「识别控件所必需」的边界）。比 shadcn 默认 92% 加深
   *           一档到 84%，因为我们卡片底和页面底只差 1.03:1，轮廓得担事。
   * --input   输入框、可点单元格的边界。这是真正的控件边界，必须 ≥3:1，
   *           否则表单在浅色下几乎看不见框。 */
  --border: oklch(84% 0 0);
  --input: oklch(66% 0 0);
  --ring: oklch(55% 0 0);

  /* --- 业务状态色 ---
   * 底色无彩，所以状态色不需要很饱和就能跳出来。
   * 五档对应订单/拍摄流程：待处理 → 进行中 → 已完成 / 异常 / 已取消
   */
  --status-pending: oklch(72% 0.14 75);     /* 琥珀 —— 等人动手 */
  --status-active: oklch(62% 0.15 245);     /* 蓝 —— 正在走 */
  --status-done: oklch(63% 0.15 155);       /* 绿 —— 走完了 */
  --status-alert: oklch(58% 0.19 27);       /* 红 —— 要人介入 */
  --status-idle: oklch(60% 0 0);            /* 灰 —— 已取消/归档 */

  /* --warning 是 --status-pending 的别名。orders.css 里有 4 处引用它
   * （.notice--warn / .table tr.is-pending / 待确认卡片的描边和底色），
   * 但这个变量从来没定义过 —— color-mix 拿到无效颜色会让整条规则失效，
   * 所以那几处一直是没颜色的，而且不报错。补上定义比改 4 个调用点小。
   * 新代码优先用 --status-pending，语义更明确。 */
  --warning: var(--status-pending);

  --destructive: oklch(58% 0.19 27);
  --destructive-foreground: oklch(98% 0 0);

  /* --- 首页点阵地球 ---
   * 唯一带色的装饰元素，globe.js 读这两个值当画笔颜色。
   * 色相 165（青绿）跟 --status-done 同族，不引入第三种色倾向。
   * 它画在 canvas 上、aria-hidden，不承载信息，所以不进对比度门槛。
   */
  --globe-base: oklch(48% 0.05 165);        /* 大陆点阵、经纬网 */
  --globe-accent: oklch(52% 0.13 165);      /* 航线、城市节点 */

  /* --- 几何 --- */
  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- 字体：系统栈，不加载外部字体 ---
   * 国内访问不会被 Google Fonts 卡住；中文在 Win 走雅黑、Mac 走苹方。
   * 「PingFang SC」必须排在「Microsoft YaHei」之前，否则 Mac 上会拿到雅黑。
   */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
               Roboto, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
               "Noto Sans Mono CJK SC", monospace;

  /* --- 阴影：低透明度大模糊，深色模式下几乎不可见，靠边框撑结构 --- */
  --shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
  --shadow: 0 4px 12px -2px oklch(0% 0 0 / 0.08);
  --shadow-lg: 0 8px 24px -6px oklch(0% 0 0 / 0.12);
}

/* 深色主题。用 [data-theme] 而不是 @media (prefers-color-scheme)：
 * 员工要能自己切换，不是跟着系统走。JS 只负责翻这一个属性。 */
:root[data-theme="dark"] {
  --background: oklch(20.5% 0 0);
  --foreground: oklch(96% 0 0);
  --card: oklch(24.5% 0 0);
  --card-foreground: oklch(96% 0 0);
  --popover: oklch(28% 0 0);
  --popover-foreground: oklch(96% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(20.5% 0 0);
  --secondary: oklch(30% 0 0);
  --secondary-foreground: oklch(96% 0 0);
  --muted: oklch(28.5% 0 0);
  --muted-foreground: oklch(73% 0 0);
  --accent: oklch(32% 0 0);
  --accent-foreground: oklch(96% 0 0);
  /* 同样分两档。深色下 --input 要到 52.5% 才够 3:1（算出来的，不是估的） */
  --border: oklch(45% 0 0);
  --input: oklch(53% 0 0);
  --ring: oklch(62% 0 0);

  /* 深底下状态色要提亮，否则对比度不够看不清 */
  --status-pending: oklch(80% 0.14 75);
  --status-active: oklch(72% 0.14 245);
  --status-done: oklch(75% 0.15 155);
  --status-alert: oklch(70% 0.17 27);
  --status-idle: oklch(65% 0 0);
  --destructive: oklch(70% 0.17 27);
  --destructive-foreground: oklch(20.5% 0 0);

  /* 深底下地球要提亮，否则点阵糊在背景里 */
  --globe-base: oklch(88% 0.03 165);
  --globe-accent: oklch(78% 0.15 165);
}

/* color-scheme 告诉浏览器把原生控件（滚动条、下拉箭头、日期选择器、
 * 表单聚焦环）也按深浅渲染 —— 只改 CSS 变量的话这些是系统画的，
 * 暗色页面上会出现亮色滚动条。
 *
 * 不再用 @media (prefers-color-scheme)：现在默认就是暗色，不跟随系统
 * （大米哥 2026-10-29 定），而且 base.html 里 <html> 一定带 data-theme，
 * 那个 :not([data-theme]) 选择器永远匹配不上，等于死代码。 */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }