/* ══════════════════════════════════════════════════════════════════════════
   DIGGERLAB · 统一设计令牌 (dgl-tokens.css)
   ──────────────────────────────────────────────────────────────────────────
   全站唯一色板来源。三个页面在 <head> 里都引入这一个文件,且必须放在
   其他样式表和 <style> 之前。

   配色:Claude 暖调(珊瑚主色 + 暖白底 + 浅色侧栏)
   字体:Archivo(拉丁)+ 思源黑体(中文)+ Source Serif 4(标题衬线)

   文件分三层:
     【核心层】约 40 个真正的设计决定。要改配色,只改这一层。
     【兼容层】把三个旧文件里 102 个变量名全部映射到核心层。
               所以那 16000 行现有 CSS 一行都不用改。
     【全站基础】html/body 底色、等宽数字、减弱动效。

   深色模式只覆盖核心层——兼容层用 var() 引用,会自动跟着变。

   版本:2026-08-25
   ══════════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  核心层 · 浅色(默认)                                                 ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root{
  color-scheme:light;
  --scheme:light;

  /* ── 主色 · Anthropic 珊瑚 ──
     #D97757 是 Claude 界面里的那个主色。
     比你们现在用的 #C15F3C 更亮一点、更偏橘,饱和度低一档。 */
  --brand:#D97757;
  --brand-deep:#C2603F;
  --brand-light:#E39A80;
  --on-brand:#FFFFFF;

  /* ── DIGGERLAB 自己的品牌标记(保留,用在 logo 和品牌块) ── */
  --dgl-yellow:#FFC001;
  --dgl-yellow-deep:#D9A300;
  --dgl-black:#1F1E1D;

  /* ── 中性 · 暖白纸系 ──
     关键在于底色不是纯灰,而是带一点黄的暖白。
     纯白卡片压在暖白底上,层次靠色温差而不是靠阴影。 */
  --bg:#FAF9F5;          /* 页面底 */
  --surface:#FFFFFF;     /* 卡片 */
  --surface-2:#F5F4EF;   /* 次级面 · 表头、工具条 */
  --surface-3:#EFEEE7;   /* 三级面 · 输入框底 */
  --text:#1F1E1D;
  --muted:#6B6862;
  --faint:#9A968D;
  --line:#E5E3DC;
  --line-strong:#D6D3C8;

  /* ── 侧边栏 · 浅色 ──
     这是和陶土版最大的不同。Claude 的侧栏比正文区略深一点点,
     靠色温和一条细线分隔,不用深色块。 */
  --rail:#F0EEE6;
  --rail-2:#E7E5DA;
  --rail-line:#DFDCD1;
  --rail-text:#5C594F;
  --rail-dim:#9A968D;
  --on-dark:#1F1E1D;     /* 侧栏是浅色,所以"侧栏上的强调文字"是深色 */

  /* ── 导航当前项 ── */
  --nav-on-bg:color-mix(in srgb, var(--brand) 15%, transparent);
  --nav-on-text:#B4552F;

  /* ── 语义色 · 统一降饱和,和暖白底协调 ── */
  --ok:#5A8C63;
  --warn:#B8863B;
  --bad:#C0523F;
  --info:#4A7396;
  --purple:#8A6BB0;
  --orange:#C2752E;
  --teal:#3F8E84;

  /* ── 圆角 ── */
  --r-sm:6px;
  --r:10px;
  --rlg:12px;
  --r-xl:20px;

  /* ── 阴影 · 克制 ──
     Claude 的界面几乎不用阴影,层次靠 1px 细线和色温差。
     这里比陶土版轻很多,是刻意的。 */
  --shadow-sm:0 1px 2px rgba(31,30,29,.06);
  --shadow:0 8px 32px rgba(31,30,29,.10);
  --shadow-modal:0 16px 48px rgba(31,30,29,.16);
  --shadow-toast:0 6px 24px rgba(31,30,29,.14);
  --overlay-bg:rgba(31,30,29,.32);

  /* ── 字体 ──
     顺序不能颠倒:拉丁字体写在前面,中文自动落到思源黑体。
     反过来写的话,英文和数字会被思源黑体接管,就没效果了。 */
  --sans:'Archivo','Noto Sans SC','PingFang SC','Microsoft YaHei UI','Hiragino Sans GB',system-ui,-apple-system,sans-serif;
  --serif:'Source Serif 4','Noto Serif SC','Songti SC',serif;
  --mono:'Noto Sans Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── 动效 ── */
  --dur-fast:.12s;
  --dur-base:.2s;
  --dur-slow:.26s;
  --ease-out:cubic-bezier(.32,.72,0,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --mobile-nav-h:72px;
  --mobile-top-h:54px;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  核心层 · 深色                                                        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"]{
  color-scheme:dark;
  --scheme:dark;

  --brand:#E08160;
  --brand-deep:#EDA085;
  --brand-light:#EDA085;
  --on-brand:#1F1E1D;

  --bg:#262624;
  --surface:#30302E;
  --surface-2:#3A3A37;
  --surface-3:#434340;
  --text:#F5F4EF;
  --muted:#C2BFB6;
  --faint:#8C8880;
  --line:#3F3F3B;
  --line-strong:#4D4D48;

  --rail:#1F1E1D;
  --rail-2:#2B2A28;
  --rail-line:#353431;
  --rail-text:#C2BFB6;
  --rail-dim:#8C8880;
  --on-dark:#F5F4EF;

  --nav-on-bg:color-mix(in srgb, var(--brand) 20%, transparent);
  --nav-on-text:#EDA085;

  --ok:#7FA987;
  --warn:#D6A75C;
  --bad:#D97564;
  --info:#7BA3C4;
  --purple:#A98BCB;
  --orange:#D98A4A;
  --teal:#52A89C;

  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --shadow:0 8px 32px rgba(0,0,0,.38);
  --shadow-modal:0 16px 48px rgba(0,0,0,.52);
  --shadow-toast:0 6px 24px rgba(0,0,0,.46);
  --overlay-bg:rgba(0,0,0,.58);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  兼容层 · 旧变量名映射                                                ║
   ║                                                                       ║
   ║  三个旧文件用了 102 个变量名来表达同一批概念,例如"文字灰"就有       ║
   ║  --muted / --sub / --dim / --text2 / --faint 五种写法。               ║
   ║  这里把它们全部指向核心层,现有 CSS 规则一行都不用改。                ║
   ║                                                                       ║
   ║  长期目标是逐步把旧名字替换成核心名字,然后删掉这一整段。            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
:root{

  /* ── 主色系(operations.html 用 --accent,inventory 用 --brand-lt) ── */
  --accent:        var(--brand);
  --brand-2:       var(--brand-light);
  --brand-soft:    color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-lt:      color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-lt2:     color-mix(in srgb, var(--brand) 22%, transparent);
  --ad:            color-mix(in srgb, var(--brand) 14%, transparent);
  --ad2:           color-mix(in srgb, var(--brand) 26%, transparent);
  --on-accent:     var(--on-brand);
  --stripe:        linear-gradient(90deg, var(--brand), var(--brand-light) 48%, var(--dgl-yellow-deep));

  /* ── 挖机黄 ── */
  --brand-yellow:      var(--dgl-yellow);
  --brand-yellow-deep: var(--dgl-yellow-deep);
  --brand-black:       var(--dgl-black);
  --yellow:            var(--dgl-yellow);
  --yellow-soft:       color-mix(in srgb, var(--dgl-yellow) 18%, transparent);

  /* ── 面(operations 的 --ink 系列是"由深到浅的层",不是文字色) ── */
  --ink:       var(--bg);
  --ink2:      var(--surface);
  --ink3:      var(--surface-2);
  --ink4:      var(--surface-3);
  --bg2:       var(--surface-2);
  --surf:      var(--surface);
  --card:      var(--surface);
  --card-color:var(--surface);
  --card-soft: var(--surface-2);
  --dg-bg:     var(--bg);
  --hero-bg:   var(--rail);
  --hero-text: var(--on-dark);
  --toast-bg:  var(--dgl-black);
  --toast-text:var(--on-dark);

  /* ── 文字 ── */
  --text2:  var(--muted);
  --text3:  var(--faint);
  --sub:    var(--muted);
  --dim:    var(--faint);
  --navy:   var(--text);
  --dg-ink: var(--text);
  --stat-c: var(--text);

  /* ── 描边 ── */
  --line2:      var(--line-strong);
  --line3:      var(--line-strong);
  --border:     var(--line);
  --border-2:   var(--line-strong);
  --border-3:   var(--line-strong);
  --bcol:       var(--line);
  --sc-line:    var(--line);
  --csw-border: var(--text);

  /* ── 语义色与它们的浅底 ── */
  --green:      var(--ok);
  --green-soft: color-mix(in srgb, var(--ok) 14%, transparent);
  --green-lt:   color-mix(in srgb, var(--ok) 14%, transparent);
  --gd:         color-mix(in srgb, var(--ok) 16%, transparent);

  --amber:      var(--warn);
  --amber-lt:   color-mix(in srgb, var(--warn) 15%, transparent);
  --yd:         color-mix(in srgb, var(--warn) 15%, transparent);

  --red:        var(--bad);
  --red-lt:     color-mix(in srgb, var(--bad) 14%, transparent);
  --rd:         color-mix(in srgb, var(--bad) 14%, transparent);

  --blue:       var(--info);
  --blue-lt:    color-mix(in srgb, var(--info) 14%, transparent);

  --purple-soft:color-mix(in srgb, var(--purple) 15%, transparent);
  --pd:         color-mix(in srgb, var(--purple) 14%, transparent);
  --od:         color-mix(in srgb, var(--orange) 14%, transparent);
  --td:         color-mix(in srgb, var(--teal) 14%, transparent);

  /* ── 侧边栏 ── */
  --sidebar:          var(--rail);
  --sidebar-bg:       var(--rail);
  --sidebar-line:     var(--rail-line);
  --sidebar-text:     var(--rail-text);
  --sidebar-text-on:  var(--on-dark);
  --sidebar-hover:    color-mix(in srgb, var(--on-dark) 8%, transparent);

  /* ── 圆角 ── */
  --radius:    var(--r);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-xl);
  --dg-radius: var(--rlg);

  /* ── 阴影 ── */
  --sh: var(--shadow-sm);

  /* ── 杂项 ── */
  --cx-bg:      color-mix(in srgb, var(--text) 6%, transparent);
  --ring-track: color-mix(in srgb, var(--text) 9%, transparent);
  --cd-dot:     rgba(255,255,255,.85);
  --num:        var(--mono);
  --score:      var(--mono);

  /* ── 间距(unified.css 用) ── */
  --space-1:6px; --space-2:12px; --space-3:20px; --space-4:32px;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  全站基础                                                             ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
html{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
}
body{margin:0;min-width:320px;min-height:100vh;background:var(--bg)}

/* 所有数字、编号、金额、日期统一用等宽体,保证表格里按位对齐。
   用法:给元素加 class="num" */
.num,.mono,
[data-num],
td.num,th.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   字体说明
   ──────────────────────────────────────────────────────────────────────────
   Claude 界面实际用的是:
     Styrene A / Styrene B  —— Commercial Type,商业授权
     Tiempos Text / Headline —— Klim Type Foundry,商业授权
   两款都需要按域名或流量购买授权,没有合法免费版本,
   而且都不含中文字符。

   所以这里用的是气质接近的开源替代:
     Archivo        ≈ Styrene   方头无衬线,x 高度高,界面辨识度好
     Source Serif 4 ≈ Tiempos   过渡衬线,适合标题和品牌名
     Noto Sans SC   中文正文(你们现在就在用)
     Noto Sans Mono 数字与编码

   如果预算允许、也确实需要一模一样,可以直接去这两家买授权:
     https://commercialtype.com/catalog/styrene
     https://klim.co.nz/retail-fonts/tiempos-text/

   HTML 里需要引入:
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Sans+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   ══════════════════════════════════════════════════════════════════════════ */
