/* public/styles/tokens.css
 * 观复 · Almanac —— 二期设计 token（冻结值，逐字对应 PRD-v2 §2.2 / §2.3 / §2.4）
 * -----------------------------------------------------------------------------
 * · 浅色（中国传统色）为默认，定义在 :root 与 html[data-theme="light"]；
 * · 暮色主题由 html[data-theme="dusk"] 覆盖同名颜色 token；
 * · 一切色值、圆角、间距、字号均为冻结值——其它文件只引用 token，不得写死。
 * · 一期的旧 token 名（paper / ink / line / radius 等）已在 v2 废止，勿再引用。
 * 命名 tradition：中性色取「织物 / 纸绢」系，语义色取「矿物 / 植物染料」系。
 */

/* =========================================================================
 * 尺度 token（不随主题变化）：圆角 / 间距 / 阴影 / 字号 / 行高 / 字体 / 动效
 * ========================================================================= */
:root {
  /* —— 圆角（PRD §2.4，替换一期 6px 体系；最小不是直角）—— */
  --r-xs: 6px;    /* 标签内小徽标、复选框、色点 */
  --r-sm: 10px;   /* 按钮、输入框、侧栏项、小卡片 */
  --r-md: 14px;   /* 卡片、列表项、分组卡 */
  --r-lg: 18px;   /* 面板、弹窗、详情抽屉、编辑器容器 */
  --r-xl: 24px;   /* 看板列容器、模态容器 */
  --r-pill: 999px;/* 胶囊按钮、开关、标签胶囊、头像 */

  /* —— 间距（8px 网格，PRD §2.4）—— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* —— 阴影（暖色调，克制）—— */
  --shadow-1: 0 1px 2px rgba(43, 38, 32, .06), 0 1px 3px rgba(43, 38, 32, .04);
  --shadow-2: 0 4px 12px rgba(43, 38, 32, .10), 0 2px 4px rgba(43, 38, 32, .06);
  --shadow-3: 0 12px 32px rgba(43, 38, 32, .16);

  /* —— 字号（PRD §2.4）—— */
  --fs-display: 28px; /* 仪表盘问候、空状态大标题 */
  --fs-h1: 22px;      /* 页面标题、编辑器标题 */
  --fs-h2: 17px;      /* 卡片 / 区块标题 */
  --fs-body: 15px;    /* 正文 */
  --fs-sm: 13px;      /* 元信息、次要标签 */
  /* ⚠ 豁免声明（已拍板，勿擅用）：
     --fs-xs(12) / --fs-micro(11) **仅用于装饰性角标，禁止用于正文**。
     允许的用途仅限：.nav-sub / .brand-en / .side-group-label / kbd / .tv-hour /
     .column-count / .badge。正文级文字一律走 --fs-body / --fs-page
     （≤1024 由文件末尾的媒体查询抬到 16px）。
     依据：test/_readability-audit.out R-A1 / R-A2（11–13px 共 1057 处违规）。 */
  --fs-xs: 12px;      /* 标签胶囊、徽标（装饰性角标，见上方豁免声明） */
  --fs-micro: 11px;   /* 角标、计数（装饰性角标，见上方豁免声明） */

  /* —— 行高 —— */
  --lh-tight: 1.25;   /* 标题 */
  --lh-body: 1.6;     /* 正文 */

  /* —— 字体（系统栈，禁 CDN）—— */
  --font-body: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "SF Mono", "Menlo", "Courier New", monospace;

  /* —— 动效（PRD §2.6；仅 transform/opacity/color/box-shadow 可动）—— */
  --dur-micro: 120ms; /* 微交互 */
  --dur-base: 160ms;  /* 常规 */
  --dur-panel: 200ms; /* 面板 / 弹窗 */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* 进入/强调（减速） */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);  /* 退出 */

  /* —— 断点（媒体查询里不能引用变量，此处仅作记录/JS 用）—— */
  --bp-mobile: 768px;
}

/* =========================================================================
 * 浅色主题（默认）· PRD §2.2 中国传统色 —— 实现以 hex 为准
 * ========================================================================= */
:root,
html[data-theme="light"] {
  /* ① 底色 / 表面 / 分层背景（暖调中性，4 级） */
  --bg-base: #F7F3EA;      /* 缟   应用主背景 */
  --bg-surface: #FDFBF6;   /* 月白 卡片 / 面板 / 弹窗表面 */
  --bg-surface-2: #F1EADA; /* 米色 次级表面：侧栏底 / 分组头 / 工具栏 / hover 底 */
  --bg-sunken: #E7DDC8;    /* 茶白 凹陷区：输入槽 / 代码块 / 进度轨道 / 看板列底 */

  /* ② 文字（3 级，均 ≥ 4.5:1 on --bg-base） */
  --text-primary: #2B2620;   /* 墨 ≈ 13:1 */
  --text-secondary: #5F5646; /* 黎 ≈ 7.5:1 */
  --text-faint: #6F6757;     /* 苍 ≈ 4.7:1（最坏，bg-surface-2） */

  /* ③ 分隔线与描边（2 级） */
  --border: #E3D9C5;         /* 素   常规描边 */
  --border-strong: #CDBFA1;  /* 浅檀 强调描边 / 输入聚焦前 */

  /* ④ 强调色（朱砂，品牌延续） */
  --accent: #B23A2E;         /* 朱砂 */
  --accent-hover: #972F23;   /* 朱红 */
  --accent-soft: #D98B80;    /* 退红 弱化强调 */
  --accent-fg: #FDFBF6;      /* 月白 强调色上的文字 */

  /* ⑤ 模块语义色 */
  --m-work: #3C4A5A;  /* 黛   工作 */
  --m-study: #557C63; /* 竹月 学习 */
  --m-life: #9A6A3A;  /* 赭石 生活 */
  --m-info: #4C7E93;  /* 天青 信息 / 收件箱 / 云端 */

  /* ⑥ 语义色 */
  --success: #3E7C4F; /* 松花绿 */
  --warning: #C68A1E; /* 琥珀 */
  --danger: #9E2B25;  /* 绛 */

  /* ⑦ 涨跌色（中国惯例：涨红跌绿，必须保留） */
  --up: #C0392B;   /* 绯红 涨 */
  --down: #2E8B57; /* 青翠 跌 */
  --flat: #6F6757; /* 苍   持平淡（与 --text-faint 同值，≥4.5:1） */

  /* —— 派生 / 辅助 token（非 §9.1 契约名，仅供内部使用）—— */
  --focus-ring: 0 0 0 3px rgba(178, 58, 46, .22); /* 键盘焦点环（朱砂 22%） */
  --overlay: rgba(43, 38, 32, .35);               /* 弹窗遮罩 */
  --topbar-bg: rgba(241, 234, 218, .82);          /* 顶栏半透明底（允许模糊） */
}

/* =========================================================================
 * 暮色主题（低亮度，非纯黑、暖调）· PRD §2.3
 * ========================================================================= */
html[data-theme="dusk"] {
  --bg-base: #201D18;      /* 玄墨 主背景（暖近黑） */
  --bg-surface: #292520;   /* 鸦青 卡片 / 面板 */
  --bg-surface-2: #332E27; /* 黛   次级表面：侧栏 / 工具栏 */
  --bg-sunken: #17150F;    /* 墨黑 凹陷区 / 看板列底 */

  --text-primary: #ECE5D6;   /* 月白 正文 */
  --text-secondary: #B3A992; /* 苍青 次要文字 */
  --text-faint: #A19785;     /* 灰陶 占位符（最坏 4.66:1，bg-surface-2） */

  --border: #3B352D;         /* 黛青 */
  --border-strong: #4E463B;  /* 蟹壳青 */

  --accent: #D45B45;         /* 朱砂（提亮） */
  --accent-hover: #E06A54;   /* 丹 */
  --accent-soft: #A65B4B;    /* 退红（暮色派生值，PRD 未列） */
  --accent-fg: #201D18;      /* 强调色上的文字（暗底改深字，保证对比） */

  --m-work: #8FA6BE;  /* 黛蓝 */
  --m-study: #86B295; /* 竹月 */
  --m-life: #C29A6B;  /* 驼 */
  --m-info: #7FB0C4;  /* 天青 */

  --success: #6FB282; /* 松花绿 */
  --warning: #DBA83C; /* 琥珀 */
  --danger: #E0604F;  /* 丹 */

  --up: #E15A4B;   /* 绯红 */
  --down: #55B37E; /* 青翠 */
  --flat: #A19785; /* 灰陶（与 --text-faint 同值，≥4.5:1） */

  --focus-ring: 0 0 0 3px rgba(212, 91, 69, .30); /* 暮色焦点环 */
  --overlay: rgba(0, 0, 0, .55);                  /* 暮色遮罩 */
  --topbar-bg: rgba(51, 46, 39, .82);
}

/* —— 紧凑模式（沿用一期 data-density="compact"，缩放间距与正文）—— */
html[data-density="compact"] {
  --sp-1: 3px;
  --sp-2: 6px;
  --sp-3: 9px;
  --sp-4: 12px;
  --sp-5: 15px;
  --sp-6: 18px;
  --sp-7: 24px;
  --sp-8: 30px;
  --fs-body: 14px;
}

/* =========================================================================
 * 工具类
 * ========================================================================= */

/* 数字等宽 + 右对齐（PRD §2.4：数字一律 tabular-nums + 右对齐） */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 涨跌色（中国金融惯例：涨红跌绿） */
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }

/* =========================================================================
 * 响应式 / 流体化扩展 token（本次追加，**不改动**上方任何既有冻结值）
 * 用途：超宽屏内容限宽、页面级流体字号与内边距、移动端输入与触控目标。
 * ========================================================================= */
:root {
  /* 内容区最大宽度（超宽屏居中，避免行宽过长、信息发散） */
  --content-max: 1400px;
  /* 主区流体内外边距（沿用 --sp-* 的 8px 网格下限/上限观感） */
  --pad-page-x: clamp(16px, 1.8vw, 28px);
  --pad-page-y: clamp(16px, 1.4vw, 22px);
  /* 页面级正文字号（流体）：桌面保持 15px（= --fs-body），窄屏下限 14px */
  --fs-page: clamp(14px, 0.15vw + 13.6px, 15px);
  /* 移动端输入控件最小字号（≥16px 可避免 iOS Safari 聚焦时自动放大页面） */
  --fs-input-min: 16px;
  /* 移动端最小触控目标 */
  --tap-min: 44px;
  /* 长文阅读限宽：约 40 个全角字 / 行（15px 时 ≈600px，16px 时 ≈640px）。
     只作用于**承载文字的叶子容器**，禁止用于装多列的 grid 容器
     （宽屏 .md-body 是「编辑器 + 预览」分栏容器，限它会两栏一起变窄）。
     依据：test/_longform-probe.out —— setting .hint 实测 105.1 汉字/行、
     .empty-text 88.9、textarea.md-textarea 52.2（均 > 40 的舒适上限）。 */
  --prose-max: 40em;
}

/* =========================================================================
 * 可读性修复 · ≤1024（手机 + 平板）正文级字号
 * -----------------------------------------------------------------------------
 * 拍板的裁定：用户同时要「桌面最大化信息密度」与「移动端阅读舒适」，二者在桌面上
 * 矛盾 —— 因此**桌面（>1024）保持既有冻结值 15px 不变**，只对 ≤1024 抬到 16px。
 * 实现方式必须是**媒体查询内覆盖 token**，不改全局值（改全局会连带改桌面）。
 *
 * 为什么需要 --fs-page：.main 的 font-size 是 --fs-page(layout.css:186)，而
 * .li-title / .empty-text / .col-empty / .cap-name 都不显式设 font-size、靠继承
 * —— 单这一处覆盖就能把它们全部抬到 16px（改前实测 14.1625px @375）。
 *
 * 注意：--fs-xs(12) / --fs-micro(11) 是装饰性角标专 token，此处**故意不动**；
 *       正文级选择器（.li-sub/.view-sub/.hint/…）由 components.css 的
 *       ≤1024 分组规则单独抬到 16px。
 * 例外：html[data-density="compact"]（用户显式选择的紧凑模式）优先级更高，
 *       在紧凑模式下 --fs-body 仍为 14px；但 --fs-page 已被本块抬到 16px，
 *       故正文仍然是 16px。compact 保持 14px 视为「用户显式选择」的合理豁免。
 * ========================================================================= */
@media (max-width: 1024px) {
  :root {
    --fs-body: 16px;
    --fs-page: 16px;
  }
}