/* 亚之彩报价工作台 —— 设计令牌（单一来源）
 *
 * 这份文件是**唯一**定义颜色的地方。index.html 与 quotes.html 都 link 它，
 * check_contrast.py 也解析它。以前令牌抄在 index.html 里，
 * 改一次色板就要同步三处，而检查器读的是其中一处——它会先过期，
 * 然后变成一句谎话。
 *
 * ── 中性阶是纯灰（2026-08-09 按业务方要求改）──────────────────────
 * 曾经把中性色往纸色偏（hue 75，chroma 0.004~0.010），理由是「纸和墨」。
 * 业务方看过实机后要求换成 shadcn 那种**简单黑白灰**：
 * 一天要看几十张成本表，暖调在长时间盯屏下反而让数字发糊。
 * 现在中性色 chroma 恒等于 0，阴影也去色。
 *
 * **语义色（ok / warn / bad / info）保持高彩度不变**——
 * 它们是信息不是装饰，去了色就等于把「这里不对劲」也一起藏了。
 *
 * ── 为什么没有品牌强调色 ──────────────────────────────────────────
 * 这是一张**成本台账**。页面上唯一该有颜色的东西是「这里不对劲」：
 * 缺数据、待裁决、人工覆盖、利润偏低。主按钮是墨色，不是蓝色。
 * 给它配一个品牌蓝，那点蓝会和警告色抢注意力，而警告才是这个产品的全部意义。
 *
 * 语义色（ok / warn / bad）保持高彩度——它们是信息，不是装饰。
 */

:root{
  color-scheme:light dark;

  /* ── 纸与墨 ─────────────────────────────────────────────────── */
  --background:oklch(0.968 0 0);   /* 页底：未涂布纸 */
  --foreground:oklch(0.185 0 0);   /* 正文墨色，不是纯黑 */
  --card:oklch(0.995 0 0);         /* 卡片：比页底亮一档，卡片浮起来 */
  --muted:oklch(0.944 0 0);        /* 表头、输入框底、代码块 */
  --muted-foreground:oklch(0.478 0 0);
  --border:oklch(0.878 0 0);
  --input:oklch(0.878 0 0);
  --ring:oklch(0.52 0 0);
  --primary:oklch(0.245 0 0);      /* 主按钮 = 墨 */
  --primary-foreground:oklch(0.985 0 0);
  --accent:oklch(0.944 0 0);
  --accent-strong:oklch(0.905 0 0); /* 选中行、当前步 */
  --nav:oklch(0.986 0 0);

  /* ── 语义：页面上唯一该有颜色的东西 ─────────────────────────── */
  --ok:oklch(0.455 0.135 155);   --ok-bg:oklch(0.948 0.040 158);
  --warn:oklch(0.492 0.128 62);  --warn-bg:oklch(0.958 0.055 88);
  --bad:oklch(0.468 0.185 27);   --bad-bg:oklch(0.956 0.030 22);
  --info:oklch(0.470 0.085 235); --info-bg:oklch(0.950 0.028 235);

  /* 卡片标题（2026-08-11 按业务方要求：红色、加大、加粗）。
     **它和 --bad 是同一族红，肉眼分不开**——这是上面那条「唯一该有颜色的
     东西是这里不对劲」的一个例外，记在这里而不是让它悄悄发生。
     能区分开靠的是位置和体量：标题在卡片顶部、大字加粗；
     报错是小字加一块 --bad-bg 底色。所以**绝不要给报错文字用 --title，
     也绝不要让标题带上 --bad-bg 那块底**，一旦混用两者就真的分不出来了。
     色相 30、明度更低，是印章朱红而不是警示红。 */
  --title:oklch(0.435 0.185 30);

  /* ── 高度：阴影往墨色偏，不用纯黑 ───────────────────────────── */
  --elev:0 1px 2px 0 oklch(0 0 0 / .08);
  --elev-2:0 2px 6px -1px oklch(0 0 0 / .10);
  --pop:0 10px 30px -8px oklch(0 0 0 / .22);

  /* ── 尺度 ───────────────────────────────────────────────────── */
  --r:10px; --r-sm:7px; --r-lg:14px;
  --t:170ms cubic-bezier(.22,.61,.36,1);
}

/* 深色：面板**越靠前越亮**（页底 → 卡片 → 内嵌）。
   深色下阴影几乎不起作用，明度才是深度线索。 */
@media (prefers-color-scheme:dark){
  :root{
    --background:oklch(0.162 0 0);
    --foreground:oklch(0.965 0 0);
    --card:oklch(0.218 0 0);
    --muted:oklch(0.276 0 0);
    --muted-foreground:oklch(0.735 0 0);   /* 深色下要更亮，400 档不是 500 */
    --border:oklch(0.995 0 0 / 11%);
    --input:oklch(0.995 0 0 / 14%);
    --ring:oklch(0.62 0 0);
    --primary:oklch(0.955 0 0);
    --primary-foreground:oklch(0.218 0 0);
    --accent:oklch(0.276 0 0);
    --accent-strong:oklch(0.330 0 0);
    --nav:oklch(0.192 0 0);

    --ok:oklch(0.800 0.185 155);   --ok-bg:oklch(0.320 0.060 156);
    --warn:oklch(0.842 0.165 85);  --warn-bg:oklch(0.330 0.068 72);
    --bad:oklch(0.735 0.170 24);   --bad-bg:oklch(0.328 0.082 22);
    --info:oklch(0.780 0.100 235); --info-bg:oklch(0.312 0.052 238);
    --title:oklch(0.780 0.150 28);

    --elev:0 1px 2px 0 oklch(0 0 0 / .42);
    --elev-2:0 2px 8px -1px oklch(0 0 0 / .50);
    --pop:0 10px 30px -8px oklch(0 0 0 / .62);
  }
}

/* 手动切换要能盖过系统偏好，两个方向都要盖得住。
   **color-scheme 必须一起翻**：只翻变量的话，输入框、勾选框、下拉箭头这些
   原生控件仍然按系统偏好画——系统深色时手动切浅色，卡片变白了而输入框还是黑的，
   而且它不报任何错，只是看起来「这个主题没做完」。 */
:root[data-theme=light]{
  color-scheme:light;
  --background:oklch(0.968 0 0); --foreground:oklch(0.185 0 0);
  --card:oklch(0.995 0 0);       --muted:oklch(0.944 0 0);
  --muted-foreground:oklch(0.478 0 0);
  --border:oklch(0.878 0 0);     --input:oklch(0.878 0 0);
  --ring:oklch(0.52 0 0);        --primary:oklch(0.245 0 0);
  --primary-foreground:oklch(0.985 0 0);
  --accent:oklch(0.944 0 0);     --accent-strong:oklch(0.905 0 0);
  --nav:oklch(0.986 0 0);
  --ok:oklch(0.455 0.135 155);   --ok-bg:oklch(0.948 0.040 158);
  --warn:oklch(0.492 0.128 62);  --warn-bg:oklch(0.958 0.055 88);
  --bad:oklch(0.468 0.185 27);   --bad-bg:oklch(0.956 0.030 22);
  --info:oklch(0.470 0.085 235); --info-bg:oklch(0.950 0.028 235);
  --title:oklch(0.435 0.185 30);
  --elev:0 1px 2px 0 oklch(0 0 0 / .08);
  --elev-2:0 2px 6px -1px oklch(0 0 0 / .10);
  --pop:0 10px 30px -8px oklch(0 0 0 / .22);
}
:root[data-theme=dark]{
  color-scheme:dark;
  --background:oklch(0.162 0 0); --foreground:oklch(0.965 0 0);
  --card:oklch(0.218 0 0);       --muted:oklch(0.276 0 0);
  --muted-foreground:oklch(0.735 0 0);
  --border:oklch(0.995 0 0 / 11%);    --input:oklch(0.995 0 0 / 14%);
  --ring:oklch(0.62 0 0);        --primary:oklch(0.955 0 0);
  --primary-foreground:oklch(0.218 0 0);
  --accent:oklch(0.276 0 0);     --accent-strong:oklch(0.330 0 0);
  --nav:oklch(0.192 0 0);
  --ok:oklch(0.800 0.185 155);   --ok-bg:oklch(0.320 0.060 156);
  --warn:oklch(0.842 0.165 85);  --warn-bg:oklch(0.330 0.068 72);
  --bad:oklch(0.735 0.170 24);   --bad-bg:oklch(0.328 0.082 22);
  --info:oklch(0.780 0.100 235); --info-bg:oklch(0.312 0.052 238);
  --title:oklch(0.780 0.150 28);
  --elev:0 1px 2px 0 oklch(0 0 0 / .42);
  --elev-2:0 2px 8px -1px oklch(0 0 0 / .50);
  --pop:0 10px 30px -8px oklch(0 0 0 / .62);
}


/* ── 滚动条：照 shadcn ScrollArea 的规格用原生 CSS 复刻 ──────────────
 *
 * 这个项目是零构建的静态页，shadcn 的组件是 React 源码，装不进来。
 * 但它的观感是纯 CSS 能做到的，尺寸照抄它的 scroll-area.tsx：
 *     轨道 w-2.5 / h-2.5      → 10px
 *     p-px                    → 1px 内边距（用 transparent 边框 + background-clip 实现）
 *     thumb rounded-full bg-border
 *     transition-colors
 *
 * 系统默认滚动条在深色主题下是一条高对比的灰白粗条，比页面上任何元素都抢眼；
 * 而它承载的信息量是零。
 */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{
  background-color:var(--border);
  border-radius:9999px;
  border:1px solid transparent;      /* = p-px */
  background-clip:content-box;
  transition:background-color var(--t,150ms);
}
::-webkit-scrollbar-thumb:hover{background-color:var(--muted-foreground)}
/* 滚动到底时的那截空白角落不要留一块灰色方块 */
::-webkit-scrollbar-button{display:none;width:0;height:0}