/* ==========================================================================
   TBEATZ Web — 设计令牌（品牌层 + 语义层）
   --------------------------------------------------------------------------
   这是全站唯一的颜色 / 间距 / 字体 / 圆角真源。

   三层结构：
     1. 品牌层  --tz-*        与站点无关的原始数值。跨站点复制的就是这一层。
     2. 语义层  --surface-* 等  按"用途"命名。组件只准引用这一层。
     3. 组件层  各组件自己的 CSS 文件里定义，不在本文件。

   纪律：任何组件 CSS 里出现裸十六进制颜色 = 违规。
   本文件是浏览器直接消费的真源。tokens.json 是同一批数值的机器可读镜像，
   供 Nextcloud theming 映射、文档和设计工具使用；两者由
   `node bin/check-tokens.mjs` 校验一致，改了一处必须改另一处。
   ========================================================================== */

/* ==========================================================================
   1. 品牌层 — Brand Layer
   ========================================================================== */

:root {
  /* ---- 暖砂（浅色地面）------------------------------------------------
     Claude 式的"纸感"底色：暖白，不是纯白，也不是冷灰。
     这层是整套系统"轻盈"感的来源。 */
  --tz-sand-050: #fffdf9;   /* 卡片 / 抬升面 */
  --tz-sand-100: #faf9f5;   /* 页面地面 */
  --tz-sand-200: #f3f1ea;   /* 下沉面 / 内嵌区块 */
  --tz-sand-300: #eae7dd;   /* 轨道 / 填充 */
  --tz-sand-400: #ddd9cc;   /* 强填充 / 禁用底 */

  /* ---- 暖石墨（深色地面）----------------------------------------------
     刻意延续既有 precision 主题的暖灰血统（#191816 系），
     不用蓝黑。深浅两套共享同一个"暖"的色温。 */
  --tz-graphite-900: #1a1917;  /* 页面地面 */
  --tz-graphite-800: #211f1d;  /* 下沉面 */
  --tz-graphite-700: #262421;  /* 卡片 / 抬升面 */
  --tz-graphite-600: #2f2c28;  /* 内嵌区块 / 轨道 */
  --tz-graphite-500: #3a3630;  /* 强填充 */

  /* ---- 墨（文字）------------------------------------------------------ */
  --tz-ink-900: #1e1d1a;    /* 浅色模式主文字 */
  --tz-ink-700: #46433c;    /* 浅色模式次级 */
  --tz-ink-500: #6c665b;    /* 浅色模式弱化 · ≥4.5:1 于 sand-050/100/200/300 四种表面 */
  --tz-ink-400: #97907f;    /* 浅色模式极弱 / placeholder */

  --tz-chalk-900: #f2efe7;  /* 深色模式主文字 */
  --tz-chalk-700: #c6c0b3;  /* 深色模式次级 */
  --tz-chalk-500: #9e9789;  /* 深色模式弱化 · ≥4.5:1 于 graphite-900/800/700/600 四种表面 */
  --tz-chalk-400: #6e675c;  /* 深色模式极弱 */

  /* ---- 发丝线 ---------------------------------------------------------
     Claude 语言里深度来自 1px 暖灰描边，不来自投影。 */
  --tz-line-light: #e4e0d4;
  --tz-line-light-strong: #cfc9b8;
  --tz-line-dark: #35312b;
  --tz-line-dark-strong: #47423a;

  /* ---- 陶土（唯一暖强调色）--------------------------------------------
     全站唯一的"主行动"色。用得越少越有效：
     一个视图里原则上只有一个 clay 实心按钮。 */
  --tz-clay-700: #9e4a2e;
  --tz-clay-600: #b25736;   /* 浅色模式强调 · 实测 4.63:1 on sand-100、4.80:1 on sand-050 */
  --tz-clay-500: #d2795b;   /* 深色模式强调 · 实测 5.54:1 on graphite-900、4.88:1 on graphite-700 */
  --tz-clay-400: #e09e82;
  --tz-clay-300: #efc6b4;
  --tz-clay-100: #f9e7de;
  --tz-clay-050: #fdf4ef;

  /* ---- TBEA 品牌深蓝 —— 唯一的冷色锚点 --------------------------------
     只用于 logo 本身与其承载底。绝不用于 UI 元素、状态或强调。
     品牌规则：不得用 CSS 对 logo 重新着色、描边、拉伸或改比例。 */
  --tz-tbea-blue: #0e1e7d;

  /* ---- 语义色（低饱和，坐得住暖底）------------------------------------
     饱和度刻意压低：只有真正需要尖叫的东西才尖叫。 */
  --tz-sage-600: #46734b;    --tz-sage-400: #83ac80;   /* 正常 / 成功 */
  --tz-brass-600: #916a18;   --tz-brass-400: #d5a748;  /* 注意 / 接近阈值 */
  --tz-seal-600: #a34038;    --tz-seal-400: #dc7267;   /* 故障 / 严重 */
  --tz-steel-600: #3a6187;   --tz-steel-400: #85a8c8;  /* 信息 / 系统资源 */
  --tz-patina-600: #2c6c63;  --tz-patina-400: #5fa79c; /* 存储 / 流量 / 数据 */
  --tz-lilac-600: #66598a;   --tz-lilac-400: #a697c6;  /* 预测 / 身份 / 辅助 */

  /* ---- 圆角 ------------------------------------------------------------
     圆但不糖。Claude 的软度在 8–14px 之间。 */
  --tz-radius-xs: 4px;
  --tz-radius-sm: 6px;
  --tz-radius-md: 10px;
  --tz-radius-lg: 14px;
  --tz-radius-xl: 20px;
  --tz-radius-full: 999px;

  /* ---- 间距（4px 基数）------------------------------------------------- */
  --tz-space-1: 4px;    --tz-space-2: 8px;    --tz-space-3: 12px;
  --tz-space-4: 16px;   --tz-space-5: 20px;   --tz-space-6: 24px;
  --tz-space-8: 32px;   --tz-space-10: 40px;  --tz-space-12: 48px;
  --tz-space-16: 64px;  --tz-space-20: 80px;  --tz-space-24: 96px;

  /* ---- 字号 ------------------------------------------------------------ */
  --tz-text-2xs: 11px;  --tz-text-xs: 12px;   --tz-text-sm: 13px;
  --tz-text-base: 15px; --tz-text-md: 16px;   --tz-text-lg: 18px;
  --tz-text-xl: 20px;   --tz-text-2xl: 24px;  --tz-text-3xl: 30px;
  --tz-text-4xl: 38px;  --tz-text-5xl: 48px;

  /* ---- 字体 ------------------------------------------------------------
     衬线负责"声音"（标题、导语），无衬线负责"干活"（界面），等宽负责"数字"。

     全部自托管，无 CDN（离线与中国网络约束）。@font-face 见
     assets/fonts/fonts.css；子集由 bin/build-fonts.py 生成。

     栈顺序有意义：拉丁字体排在中日韩字体之前，所以英文走 Source Serif 4 /
     Inter，中文才落到源古宋體。源古宋體是思源宋体衍生，与 Source Serif 4
     同属思源超家族，中西文同源，这是选它俩配对的原因。 */
  --tz-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
                  "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                  "Noto Sans SC", sans-serif;
  --tz-font-serif: "Source Serif 4", "Iowan Old Style", Georgia,
                   "Yuangu Songti", "Songti SC", "Noto Serif SC", "SimSun", serif;
  --tz-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
                  "Roboto Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- 字重 / 行高 / 字距 ---------------------------------------------- */
  --tz-weight-normal: 400;  --tz-weight-medium: 500;
  --tz-weight-semibold: 600; --tz-weight-bold: 700;
  --tz-leading-tight: 1.2;  --tz-leading-snug: 1.4;
  --tz-leading-normal: 1.6; --tz-leading-relaxed: 1.75;
  --tz-tracking-tight: -0.02em; --tz-tracking-normal: 0; --tz-tracking-wide: 0.06em;

  /* ---- 投影（暖调，克制）-----------------------------------------------
     浅色模式几乎不用投影；需要层级时先考虑发丝线。 */
  --tz-shadow-light-1: 0 1px 2px rgba(45, 38, 28, .05);
  --tz-shadow-light-2: 0 2px 8px rgba(45, 38, 28, .07), 0 1px 2px rgba(45, 38, 28, .05);
  --tz-shadow-light-3: 0 8px 28px rgba(45, 38, 28, .10), 0 2px 6px rgba(45, 38, 28, .06);
  --tz-shadow-dark-1: 0 1px 2px rgba(0, 0, 0, .28);
  --tz-shadow-dark-2: 0 2px 8px rgba(0, 0, 0, .34), 0 1px 2px rgba(0, 0, 0, .24);
  --tz-shadow-dark-3: 0 10px 30px rgba(0, 0, 0, .44), 0 2px 6px rgba(0, 0, 0, .28);

  /* ---- 动效 ------------------------------------------------------------
     短、ease-out、诚实。不做弹跳，不做装饰性循环动画。 */
  --tz-duration-instant: 80ms;
  --tz-duration-fast: 140ms;
  --tz-duration-base: 200ms;
  --tz-duration-slow: 320ms;
  --tz-ease-out: cubic-bezier(.22, .61, .36, 1);
  --tz-ease-in-out: cubic-bezier(.45, .05, .55, .95);

  /* ---- 层级 ------------------------------------------------------------ */
  --tz-z-base: 0;   --tz-z-sticky: 100;  --tz-z-dropdown: 200;
  --tz-z-overlay: 300; --tz-z-modal: 400; --tz-z-toast: 500;

  /* ---- 版心 ------------------------------------------------------------ */
  --tz-measure-prose: 68ch;    /* 正文最佳阅读宽度 */
  --tz-width-content: 1120px;  /* 常规页面版心 */
  --tz-width-wide: 1440px;     /* 仪表盘版心 */
}

/* ==========================================================================
   2. 语义层 — Semantic Layer
   --------------------------------------------------------------------------
   组件只准引用这一层的变量。改主题 = 改这里的映射，不动组件。
   ========================================================================== */

/* ---- 浅色（默认）-------------------------------------------------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --surface-page: var(--tz-sand-100);
  --surface-raised: var(--tz-sand-050);
  --surface-sunken: var(--tz-sand-200);
  --surface-inset: var(--tz-sand-200);
  --surface-track: var(--tz-sand-300);
  --surface-strong: var(--tz-sand-400);
  --surface-hover: rgba(45, 38, 28, .04);
  --surface-active: rgba(45, 38, 28, .07);
  /* logo 的浅色承载底：深色模式下它是唯一保持浅色的方块 */
  --surface-brand-carrier: var(--tz-sand-050);

  --text-primary: var(--tz-ink-900);
  --text-secondary: var(--tz-ink-700);
  --text-muted: var(--tz-ink-500);
  --text-faint: var(--tz-ink-400);
  --text-on-accent: #fffdf9;
  --text-on-solid: var(--tz-sand-050);

  --line: var(--tz-line-light);
  --line-strong: var(--tz-line-light-strong);

  --accent: var(--tz-clay-600);
  --accent-hover: var(--tz-clay-700);
  --accent-quiet: var(--tz-clay-100);
  --accent-quiet-hover: var(--tz-clay-300);
  --accent-wash: var(--tz-clay-050);
  --accent-border: var(--tz-clay-300);

  --state-ok: var(--tz-sage-600);
  --state-warn: var(--tz-brass-600);
  --state-bad: var(--tz-seal-600);
  --state-info: var(--tz-steel-600);
  --state-data: var(--tz-patina-600);
  --state-aux: var(--tz-lilac-600);
  /* 状态底色：同色相 8% 不透明度，保证在暖底上不脏 */
  --state-ok-wash: rgba(70, 115, 75, .10);
  --state-warn-wash: rgba(145, 106, 24, .11);
  --state-bad-wash: rgba(163, 64, 56, .10);
  --state-info-wash: rgba(58, 97, 135, .10);
  --state-data-wash: rgba(44, 108, 99, .10);
  --state-aux-wash: rgba(102, 89, 138, .10);

  --shadow-1: var(--tz-shadow-light-1);
  --shadow-2: var(--tz-shadow-light-2);
  --shadow-3: var(--tz-shadow-light-3);

  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--tz-clay-500);
}

/* ---- 深色 --------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page: var(--tz-graphite-900);
  --surface-raised: var(--tz-graphite-700);
  --surface-sunken: var(--tz-graphite-800);
  --surface-inset: var(--tz-graphite-600);
  --surface-track: var(--tz-graphite-600);
  --surface-strong: var(--tz-graphite-500);
  --surface-hover: rgba(242, 239, 231, .05);
  --surface-active: rgba(242, 239, 231, .09);
  /* logo 承载底：深色模式下允许重构底色（Eric 2026-08-09 批准）。
     不用 sand-050 纯白——那会在深色顶栏上打出一个刺眼的白洞。
     改用 sand-400 这层暖纸调：亮度降下来不炫目，品牌深蓝在它上面仍有
     约 12:1 对比度，读作一块"做旧纸牌"而不是一个窟窿。
     底色可以变，logo 像素本身仍然不得重新着色、反色或描边。 */
  --surface-brand-carrier: var(--tz-sand-400);

  --text-primary: var(--tz-chalk-900);
  --text-secondary: var(--tz-chalk-700);
  --text-muted: var(--tz-chalk-500);
  --text-faint: var(--tz-chalk-400);
  --text-on-accent: #1a1917;
  --text-on-solid: var(--tz-graphite-900);

  --line: var(--tz-line-dark);
  --line-strong: var(--tz-line-dark-strong);

  --accent: var(--tz-clay-500);
  --accent-hover: var(--tz-clay-400);
  --accent-quiet: rgba(210, 121, 91, .16);
  --accent-quiet-hover: rgba(210, 121, 91, .26);
  --accent-wash: rgba(210, 121, 91, .08);
  --accent-border: rgba(210, 121, 91, .34);

  --state-ok: var(--tz-sage-400);
  --state-warn: var(--tz-brass-400);
  --state-bad: var(--tz-seal-400);
  --state-info: var(--tz-steel-400);
  --state-data: var(--tz-patina-400);
  --state-aux: var(--tz-lilac-400);
  --state-ok-wash: rgba(131, 172, 128, .14);
  --state-warn-wash: rgba(213, 167, 72, .14);
  --state-bad-wash: rgba(220, 114, 103, .14);
  --state-info-wash: rgba(133, 168, 200, .14);
  --state-data-wash: rgba(95, 167, 156, .14);
  --state-aux-wash: rgba(166, 151, 198, .14);

  --shadow-1: var(--tz-shadow-dark-1);
  --shadow-2: var(--tz-shadow-dark-2);
  --shadow-3: var(--tz-shadow-dark-3);

  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--tz-clay-400);
}

/* ---- 深色：无 JS 回退 ------------------------------------------------------
   语义层靠 JS 打 data-theme 才生效；禁用 JS 或脚本加载失败时深色会失效。
   下面这份是同一批数值的媒体查询回退，:not([data-theme="light"]) 保证
   用户显式选浅色时不被系统偏好覆盖。
   两份 dark token 必须逐字一致，由 bin/check-tokens.mjs 校验。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface-page: var(--tz-graphite-900);
    --surface-raised: var(--tz-graphite-700);
    --surface-sunken: var(--tz-graphite-800);
    --surface-inset: var(--tz-graphite-600);
    --surface-track: var(--tz-graphite-600);
    --surface-strong: var(--tz-graphite-500);
    --surface-hover: rgba(242, 239, 231, .05);
    --surface-active: rgba(242, 239, 231, .09);
    /* logo 承载底：深色模式下允许重构底色（Eric 2026-08-09 批准）。
       不用 sand-050 纯白——那会在深色顶栏上打出一个刺眼的白洞。
       改用 sand-400 这层暖纸调：亮度降下来不炫目，品牌深蓝在它上面仍有
       约 12:1 对比度，读作一块"做旧纸牌"而不是一个窟窿。
       底色可以变，logo 像素本身仍然不得重新着色、反色或描边。 */
    --surface-brand-carrier: var(--tz-sand-400);

    --text-primary: var(--tz-chalk-900);
    --text-secondary: var(--tz-chalk-700);
    --text-muted: var(--tz-chalk-500);
    --text-faint: var(--tz-chalk-400);
    --text-on-accent: #1a1917;
    --text-on-solid: var(--tz-graphite-900);

    --line: var(--tz-line-dark);
    --line-strong: var(--tz-line-dark-strong);

    --accent: var(--tz-clay-500);
    --accent-hover: var(--tz-clay-400);
    --accent-quiet: rgba(210, 121, 91, .16);
    --accent-quiet-hover: rgba(210, 121, 91, .26);
    --accent-wash: rgba(210, 121, 91, .08);
    --accent-border: rgba(210, 121, 91, .34);

    --state-ok: var(--tz-sage-400);
    --state-warn: var(--tz-brass-400);
    --state-bad: var(--tz-seal-400);
    --state-info: var(--tz-steel-400);
    --state-data: var(--tz-patina-400);
    --state-aux: var(--tz-lilac-400);
    --state-ok-wash: rgba(131, 172, 128, .14);
    --state-warn-wash: rgba(213, 167, 72, .14);
    --state-bad-wash: rgba(220, 114, 103, .14);
    --state-info-wash: rgba(133, 168, 200, .14);
    --state-data-wash: rgba(95, 167, 156, .14);
    --state-aux-wash: rgba(166, 151, 198, .14);

    --shadow-1: var(--tz-shadow-dark-1);
    --shadow-2: var(--tz-shadow-dark-2);
    --shadow-3: var(--tz-shadow-dark-3);

    --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--tz-clay-400);
  }
}

/* ==========================================================================
   3. 无障碍与偏好
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --tz-duration-instant: 0ms;
    --tz-duration-fast: 0ms;
    --tz-duration-base: 0ms;
    --tz-duration-slow: 0ms;
  }
}

/* 高对比度偏好：加粗发丝线，不改变色相 */
@media (prefers-contrast: more) {
  :root, :root[data-theme="light"] { --line: var(--tz-line-light-strong); }
  :root[data-theme="dark"] { --line: var(--tz-line-dark-strong); }
}