/* ============================================================
 * [AI-CONTEXT] css/tokens.css —— 设计变量（配置系统的地基）
 * 职责：集中定义全部可自定义的视觉参数（CSS 自定义属性）
 * 依赖：无
 * 被依赖：layout.css、core/config.js（M2 通过改写这些变量实现自定义）
 * 修改约束：
 *  - 变量名即配置项锚点，M2 配置定义表按名映射，改名=破坏配置记忆
 *  - 默认值必须符合需求文档固定 UI 规范：
 *    正文黑 / 拼音蓝 / 英文浅灰 / 生词红加粗 / 高频红·中频橙·低频蓝
 * ============================================================ */
:root {
    /* ---- 颜色 ---- */
    --c-bg: #eef0f2;             /* 屏幕外底色（打印时去除） */
    --c-paper: #ffffff;          /* 纸面底色 */
    --c-hanzi: #111111;          /* 中文正文：黑 */
    --c-pinyin: #2f6fdb;         /* 拼音：蓝 */
    --c-en: #9aa0a6;             /* 英文翻译：浅灰 */
    --c-vocab: #e02e2a;          /* 重点生词：红 */
    --c-tag-high: #e02e2a;       /* 高频词标签：红 */
    --c-tag-mid: #f59e0b;        /* 中频词标签：橙 */
    --c-tag-low: #2f6fdb;        /* 低频词标签：蓝 */
    --c-card-bg: #f7f8fa;        /* 生词卡片：浅灰底 */
    --c-card-border: #e6e8eb;    /* 生词卡片：轻边框 */
    --c-title: #111111;          /* 标题汉字：黑 */
    --c-title-pinyin: #2f6fdb;   /* 标题拼音：蓝 */
    --c-title-en: #9aa0a6;       /* 标题英文：浅灰 */
    --c-card-pinyin: #2f6fdb;    /* 卡片拼音：蓝 */
    --c-card-meaning: #111111;   /* 卡片释义：黑 */
    --c-card-phrases: #555555;   /* 卡片短语：深灰 */
    --ui-ok: #22a05a;            /* 面板状态提示：成功（非甲方配色，仅屏幕 UI） */

    /* ---- 字号 ---- */
    --s-title: 30px;             /* 课文大标题 */
    --s-title-pinyin: 13px;      /* 标题拼音小字 */
    --s-title-en: 13px;          /* 标题英文小字 */
    --s-hanzi: 17px;             /* 正文汉字 */
    --s-pinyin: 11px;            /* 正文拼音 */
    --s-en: 13px;                /* 英文翻译 */
    --s-card-hanzi: 20px;        /* 卡片汉字 */
    --s-card-pinyin: 12px;       /* 卡片拼音 */
    --s-card-meaning: 13px;      /* 卡片释义 */
    --s-card-phrases: 12.5px;    /* 卡片短语 */

    /* ---- 间距（配置面板的调整目标） ---- */
    --sp-page-pady: 30px;        /* 页边距：上下 */
    --sp-page-padx: 34px;        /* 页边距：左右 */
    --ls-title: 0.02em;          /* 标题字间距 */
    --sp-title-gap: 2px;         /* 标题区行间距（拼音行/英文行上间距） */
    --sp-pinyin-gap: 2px;        /* 拼音与汉字的垂直间距 */
    --sp-hanzi-spacing: 0.08em;  /* 词组（ruby 单元）间水平间距 */
    --ls-hanzi: 0;               /* 汉字字距 letter-spacing */
    --ls-pinyin: 0;              /* 拼音字距 letter-spacing */
    --ls-en: 0;                  /* 英文字距 letter-spacing */
    --sp-hanzi-en-gap: 4px;      /* 汉字行与英文行之间的垂直间距 */
    --sp-en-lineheight: 1.55;    /* 英文行高 */
    --sp-sentence-gap: 20px;     /* 句子之间间距 */
    --sp-card-gap: 12px;         /* 卡片之间间距 */
    --sp-card-pady: 12px;        /* 卡片内边距：上下 */
    --sp-card-padx: 14px;        /* 卡片内边距：左右 */
    --r-card: 10px;              /* 卡片圆角 */
    --card-width: 100%;          /* 卡片在右栏内的占宽（双栏等分是红线，只调栏内宽度） */
    --card-align: 0;             /* 卡片水平位置：0=靠左 50=居中 100=靠右（按剩余空间比例偏移） */
    --col-split: 50;             /* 双栏比例：左栏占比数字 30-70（calc 转 fr，勿带单位） */
    --card-border-w: 1px;        /* 卡片边框粗细 */

    /* ---- 字体（'' = 配置面板选"默认"时回退到 --font-base） ---- */
    --font-base: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
    --f-title: var(--font-base);
    --f-title-pinyin: var(--font-base);
    --f-title-en: var(--font-base);
    --f-card-pinyin: var(--font-base);
    --f-card-meaning: var(--font-base);
    --f-card-phrases: var(--font-base);
}