/* ==========================================================================
   czapple 设计令牌 v1.0.2 · 方向 A「同一张纸」· 2026-10-26
   --------------------------------------------------------------------------
   用法：
     <link rel="stylesheet" href="/assets/cz/tokens.css">      ← 必须
     <link rel="stylesheet" href="/assets/cz/components.css">  ← 可选，基础组件
     <html lang="zh-CN" data-brand="ms">                       ← 选子品牌（也可加在局部元素上，如矩阵页的产品卡）
   data-brand：czapple（默认，可不写）| ms | shengyi | shi | game | admin
   深色模式：默认跟随系统；<html data-theme="dark|light"> 可强制。
   规则：页面里不写死颜色、字体、圆角，一律引用 var(--cz-*)。
   本文件不依赖任何外链资源（无网络字体、无 CDN），可直接放进有 CSP 的站。
   说明文档：docs/spec.md
   ========================================================================== */

:root {
  /* ---------- 原始色板（只给本文件内部引用，页面请用下方语义令牌） ---------- */
  --cz-paper-50: #FBFAF7;
  --cz-paper-100: #F4F3EE;
  --cz-paper-200: #ECEAE3;
  --cz-paper-300: #E8E5DC;
  --cz-paper-400: #D9D5C9;
  --cz-stone-500: #6F6D66;
  --cz-stone-600: #5F5D56;
  --cz-stone-900: #2B2A27;
  --cz-clay-300: #E9A184;
  --cz-clay-400: #E08A6D;
  --cz-clay-450: #D97757;
  --cz-clay-500: #C96442;   /* czapple 品牌陶土色：图形、图标、进度条、大字 */
  --cz-clay-600: #B5522F;   /* 带白字的按钮底 */
  --cz-clay-700: #A8482A;   /* 链接、小字强调 */
  --cz-clay-50: #F6E7DF;
  --cz-night-900: #1F1E1C;
  --cz-night-800: #282725;
  --cz-night-700: #2F2E2B;
  --cz-night-600: #3A3935;
  --cz-night-500: #4A4843;

  /* ---------- 语义颜色 · 浅色 ---------- */
  --cz-bg: var(--cz-paper-100);            /* 页面底 */
  --cz-surface: #FFFFFF;                   /* 卡片、输入框 */
  --cz-surface-2: var(--cz-paper-50);      /* 卡片内次级块、页脚、表头 */
  --cz-sunken: var(--cz-paper-200);        /* 分段控件底、骨架屏；上面只放 --cz-text / --cz-text-2 */
  --cz-border: var(--cz-paper-300);        /* 默认细边框 */
  --cz-border-strong: var(--cz-paper-400); /* 输入框、次要按钮描边 */
  --cz-text: var(--cz-stone-900);          /* 正文、标题 */
  --cz-text-2: var(--cz-stone-600);        /* 次要文字 */
  --cz-muted: var(--cz-stone-500);         /* 说明、时间、占位；只放在 bg/surface/surface-2 上 */

  --cz-accent: var(--cz-clay-500);         /* 品牌色：图形、图标、选中描边、进度；作文字只限 ≥24px */
  --cz-accent-ink: var(--cz-clay-700);     /* 链接、小号强调文字 */
  --cz-accent-fill: var(--cz-clay-600);    /* 主按钮底（配 --cz-on-accent 文字） */
  --cz-accent-fill-hover: var(--cz-clay-700);
  --cz-accent-soft: var(--cz-clay-50);     /* 选中态浅底；上面文字用 --cz-accent-ink */
  --cz-on-accent: #FFFFFF;                 /* accent-fill 上的文字和图标 */

  --cz-ok: #37704A;     --cz-ok-soft: #E6F0E8;
  --cz-warn: #8F5E1E;   --cz-warn-soft: #F7ECD9;
  --cz-bad: #A2402F;    --cz-bad-soft: #F7E4E0;
  --cz-info: #46607A;   --cz-info-soft: #E4EAF0;

  --cz-focus: var(--cz-clay-700);          /* 键盘焦点描边 */
  --cz-brand-dot: var(--cz-clay-500);      /* czapple 字标圆点：固定陶土色，子品牌不覆盖 */
  --cz-overlay: rgba(31, 30, 28, .45);     /* 弹窗遮罩 */
  --cz-shadow-color: 43, 42, 39;

  /* ---------- 字体（全部系统字体，不加载网络字体） ---------- */
  --cz-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
                  "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  /* 标题衬线：Mac/iOS 用宋体；Windows 上中文故意落到微软雅黑，避免 SimSun 显得老气 */
  --cz-font-serif: Georgia, "Times New Roman", "Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC",
                   "Microsoft YaHei", serif;
  --cz-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --cz-font-heading: var(--cz-font-serif); /* 子品牌可改成 sans（后台、游戏） */
  --cz-heading-weight: 500;

  /* ---------- 字号（16px 基准） ---------- */
  --cz-fs-xs: .75rem;    /* 12 标签、角标 */
  --cz-fs-sm: .875rem;   /* 14 说明、表格 */
  --cz-fs-md: 1rem;      /* 16 正文 */
  --cz-fs-lg: 1.125rem;  /* 18 卡片标题、阅读正文 */
  --cz-fs-xl: 1.375rem;  /* 22 区块标题 */
  --cz-fs-2xl: 1.75rem;  /* 28 页面标题（手机） */
  --cz-fs-3xl: 2.25rem;  /* 36 首屏大标题（桌面） */
  --cz-lh-tight: 1.3;
  --cz-lh-body: 1.65;
  --cz-ls-label: .04em;  /* 英文大写小标签 */

  /* ---------- 间距（4px 基数） ---------- */
  --cz-space-1: 4px;
  --cz-space-2: 8px;
  --cz-space-3: 12px;
  --cz-space-4: 16px;
  --cz-space-5: 24px;
  --cz-space-6: 32px;
  --cz-space-7: 48px;
  --cz-space-8: 64px;

  /* ---------- 圆角 ---------- */
  --cz-radius-sm: 6px;     /* 标签内小块、代码、输入框内按钮 */
  --cz-radius-md: 12px;    /* 卡片、输入框（小程序 24rpx） */
  --cz-radius-lg: 16px;    /* 大面板、弹窗、图标底 */
  --cz-radius-pill: 999px; /* 按钮、状态标签、分段控件 */
  --cz-radius-btn: var(--cz-radius-pill);

  /* ---------- 阴影：默认不用，只给浮层 ---------- */
  --cz-shadow-1: 0 1px 2px rgba(var(--cz-shadow-color), .06), 0 2px 8px rgba(var(--cz-shadow-color), .04); /* 悬停卡片、吸顶页头 */
  --cz-shadow-2: 0 8px 28px rgba(var(--cz-shadow-color), .14);  /* 下拉菜单、弹窗 */

  /* ---------- 线宽、动效、版式 ---------- */
  --cz-border-width: 1px;
  --cz-icon-stroke: 1.5;     /* 线性图标描边（24px 网格） */
  --cz-dur-fast: 120ms;
  --cz-dur: 200ms;
  --cz-ease: cubic-bezier(.2, .7, .2, 1);
  --cz-content-max: 1080px;  /* 页面内容最大宽 */
  --cz-reading-max: 680px;   /* 阅读正文最大宽（约 36 个汉字） */
  --cz-header-h: 56px;

  color-scheme: light;
}

/* ---------- 子品牌 · 浅色 ----------
   方向 A：全站共用陶土色。子品牌只允许把 accent 换成自己 App 里的同族色，
   让宣传页和 App 截图对得上。新增子品牌照此格式加一段，色相须在陶土 ±10° 内。 */
[data-brand="ms"] { /* 晨间信号：与小程序完全一致，即母品牌默认值 */ }

[data-brand="shengyi"] { /* 声译：App 主色 #D45B2C */
  --cz-accent: #D45B2C;
  --cz-accent-ink: #B84A20;
  --cz-accent-fill: #B84A20;
  --cz-accent-fill-hover: #A34119;
  --cz-accent-soft: #FCEEE6;
}

[data-brand="shi"] { /* 事：App 赭红 #A9563B */
  --cz-accent: #A9563B;
  --cz-accent-ink: #924A32;
  --cz-accent-fill: #A9563B;
  --cz-accent-fill-hover: #924A32;
  --cz-accent-soft: #F6EAE2;
}

[data-brand="game"] { /* 小游戏外框：母品牌色，标题用黑体 */
  --cz-font-heading: var(--cz-font-sans);
  --cz-heading-weight: 700;
}

[data-brand="admin"] { /* 后台：同色板，更紧凑，标题黑体，按钮小圆角 */
  --cz-font-heading: var(--cz-font-sans);
  --cz-heading-weight: 600;
  --cz-radius-btn: 8px;
  --cz-radius-md: 10px;
  --cz-fs-md: .9375rem;  /* 15 */
  --cz-lh-body: 1.55;
  --cz-header-h: 48px;
  --cz-content-max: 1280px;
}

/* ---------- 深色：跟随系统（未强制浅色时） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cz-bg: var(--cz-night-900);
    --cz-surface: var(--cz-night-800);
    --cz-surface-2: var(--cz-night-700);
    --cz-sunken: #191816;
    --cz-border: var(--cz-night-600);
    --cz-border-strong: var(--cz-night-500);
    --cz-text: #ECEAE3;
    --cz-text-2: #C2BFB6;
    --cz-muted: #9C998F;
    --cz-accent: var(--cz-clay-400);
    --cz-accent-ink: var(--cz-clay-300);
    --cz-accent-fill: var(--cz-clay-450);
    --cz-accent-fill-hover: var(--cz-clay-400);
    --cz-accent-soft: #3D2A22;
    --cz-on-accent: var(--cz-night-900);
    --cz-ok: #8CC29C;   --cz-ok-soft: #24372A;
    --cz-warn: #E0B068; --cz-warn-soft: #3B2F1C;
    --cz-bad: #EE8B7B;  --cz-bad-soft: #3E2622;
    --cz-info: #9DB4CC; --cz-info-soft: #25303B;
    --cz-focus: var(--cz-clay-300);
    --cz-brand-dot: var(--cz-clay-400);
    --cz-overlay: rgba(0, 0, 0, .6);
    --cz-shadow-color: 0, 0, 0;
    color-scheme: dark;
  }
  :root:not([data-theme="light"])[data-brand="shengyi"],
  :root:not([data-theme="light"]) [data-brand="shengyi"] {
    --cz-accent: #E8744A; --cz-accent-ink: #F08B63; --cz-accent-fill: #E8744A;
    --cz-accent-fill-hover: #F08B63; --cz-accent-soft: #43281C;
  }
  :root:not([data-theme="light"])[data-brand="shi"],
  :root:not([data-theme="light"]) [data-brand="shi"] {
    --cz-accent: #D99577; --cz-accent-ink: #D99577; --cz-accent-fill: #D99577;
    --cz-accent-fill-hover: #E3A88E; --cz-accent-soft: #4A332A; --cz-on-accent: #221E1B;
  }
}

/* ---------- 深色：手动强制（值与上面完全相同） ---------- */
:root[data-theme="dark"] {
  --cz-bg: var(--cz-night-900);
  --cz-surface: var(--cz-night-800);
  --cz-surface-2: var(--cz-night-700);
  --cz-sunken: #191816;
  --cz-border: var(--cz-night-600);
  --cz-border-strong: var(--cz-night-500);
  --cz-text: #ECEAE3;
  --cz-text-2: #C2BFB6;
  --cz-muted: #9C998F;
  --cz-accent: var(--cz-clay-400);
  --cz-accent-ink: var(--cz-clay-300);
  --cz-accent-fill: var(--cz-clay-450);
  --cz-accent-fill-hover: var(--cz-clay-400);
  --cz-accent-soft: #3D2A22;
  --cz-on-accent: var(--cz-night-900);
  --cz-ok: #8CC29C;   --cz-ok-soft: #24372A;
  --cz-warn: #E0B068; --cz-warn-soft: #3B2F1C;
  --cz-bad: #EE8B7B;  --cz-bad-soft: #3E2622;
  --cz-info: #9DB4CC; --cz-info-soft: #25303B;
  --cz-focus: var(--cz-clay-300);
  --cz-brand-dot: var(--cz-clay-400);
  --cz-overlay: rgba(0, 0, 0, .6);
  --cz-shadow-color: 0, 0, 0;
  color-scheme: dark;
}
:root[data-theme="dark"][data-brand="shengyi"],
:root[data-theme="dark"] [data-brand="shengyi"] {
  --cz-accent: #E8744A; --cz-accent-ink: #F08B63; --cz-accent-fill: #E8744A;
  --cz-accent-fill-hover: #F08B63; --cz-accent-soft: #43281C;
}
:root[data-theme="dark"][data-brand="shi"],
:root[data-theme="dark"] [data-brand="shi"] {
  --cz-accent: #D99577; --cz-accent-ink: #D99577; --cz-accent-fill: #D99577;
  --cz-accent-fill-hover: #E3A88E; --cz-accent-soft: #4A332A; --cz-on-accent: #221E1B;
}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --cz-dur-fast: 0ms; --cz-dur: 0ms; }
}