/* ACP Portal Design Tokens — 设计系统 C「暖骨架 + 工程密度」
 *
 * History:
 *   2026-05-25 P2  — extracted from 18 inline :root blocks
 *   2026-05-26 v3  — 4-tier fg / 6-tier surface / etc
 *   2026-06-05 v4  — 「内容平台数据手账」纸质美学 (奶油纸 + 红印章)
 *   2026-06-06 C   — 设计系统 C: 暖白底 + 深色窄导航 + 单一陶土色 + 等宽数字 + 密表.
 *                    标题留宋体纸感, 正文/数字走工程做法. 变量名全保留, 仅改值 →
 *                    所有用 var() 的页面零模板改动自动切到 C.
 *
 * 备份: tokens.css.bak-v4paper / tokens.css.bak-blue
 */

:root {
  /* ─────────── 设计系统 C「暖骨架 + 工程密度」一手 tokens ─────────── */
  /* 暖白纸 / 茶墨 / 陶土(主色) / 橄榄(live) / 蓝莓 / 可可(深) */
  --paper: #faf7f0;
  --paper-edge: #f1ead9;
  --paper-soft: rgba(250, 247, 240, 0.55);
  --ink: #2a2018;
  --ink-soft: #5a4d3a;
  --ink-mute: #998870;
  --red: #c0613a;          /* 陶土(编辑) */
  --red-stamp: #c0613a;    /* 陶土(主强调) */
  --sage: #7a9a4e;         /* 橄榄(live/成功) */
  --butter: #e8c878;       /* 余留兼容, 不再做顶栏 */
  --blueberry: #3d5874;
  --cocoa: #3a2e22;
  --rule: #e3d8c2;
  --rule-soft: rgba(74, 51, 40, 0.08);
  --cell: rgba(255, 253, 248, 0.7);

  /* 字体 (系统字体, 不引外网) */
  --fd: "Songti SC","STSong","Source Han Serif SC",Georgia,"Times New Roman",serif;
  --fb: "PingFang SC","Hiragino Sans GB",-apple-system,"Microsoft YaHei",sans-serif;
  --fm: "JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --fh: "Kaiti SC","STKaiti","楷体",cursive;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --es: cubic-bezier(.34, 1.56, .64, 1);

  /* ─────────── 旧 var 名映射 (保持向后兼容, 不动老模板的 inline style) ─────────── */
  /* Surfaces */
  /* --bg: 透明! 让 html 的纸纹透上来, 不被 page inline body{background:var(--bg)} 盖住 */
  --bg: transparent;
  --bg-grad: transparent;
  --bg-elevated: #fffdf8;             /* 卡片/表面 (C) */
  --bg-sunken: var(--paper-edge);
  --bg-hover: rgba(241, 234, 217, 0.6);
  --glass: rgba(255, 253, 248, 0.82);
  --glass-line: var(--rule);

  /* Foreground tiers — 茶墨梯度 */
  --fg: var(--ink);
  --fg-1: var(--ink);
  --fg-2: var(--ink-soft);
  --fg-3: var(--ink-mute);

  /* Borders */
  --line: var(--rule);
  --line-strong: var(--cocoa);
  --line-focus: var(--red-stamp);

  /* Brand → 陶土 */
  --brand: var(--red-stamp);
  --brand-hover: #a9542f;
  --brand-active: var(--cocoa);
  --brand-soft: rgba(192, 97, 58, 0.10);
  --brand-soft-2: rgba(192, 97, 58, 0.18);
  --brand-fg: #fffdf8;
  --brand-grad: linear-gradient(135deg, var(--red-stamp) 0%, #a9542f 100%);
  --brand-grad-hover: linear-gradient(135deg, #a9542f 0%, var(--red-stamp) 100%);

  /* Business-line accents */
  --bl-car: var(--blueberry);          /* 车载 — 蓝莓 */
  --bl-leike: var(--cocoa);            /* 雷克 — 可可 */
  --bl-yjy: var(--red-stamp);          /* 音乐云 — 陶土 */
  --bl-oem: var(--sage);               /* OEM — 橄榄 */
  --bl-xiaoyi: var(--red);             /* 小艺 — 陶土 */
  --bl-happyktv: #b08a2e;              /* 欢乐 — 暗黄 */

  /* Semantic */
  --success: var(--sage);
  --success-soft: rgba(122, 154, 78, 0.16);
  --warn: #a76a18;
  --warn-soft: rgba(232, 200, 120, 0.22);
  --danger: #b73624;                   /* 危险保留明确红, 不跟陶土混 */
  --danger-soft: rgba(183, 54, 36, 0.10);

  /* Typography */
  --font-display: var(--fd);
  --font-body: var(--fb);
  --font-mono: var(--fm);
  --font-hand: var(--fh);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Font sizes */
  --text-xs: 11.5px;     --lh-xs: 1.5;
  --text-sm: 13px;       --lh-sm: 1.6;
  --text-base: 14.5px;   --lh-base: 1.7;
  --text-md: 16px;       --lh-md: 1.6;
  --text-lg: 19px;       --lh-lg: 1.5;
  --text-xl: 24px;       --lh-xl: 1.4;
  --text-2xl: 32px;      --lh-2xl: 1.3;
  --text-3xl: 44px;      --lh-3xl: 1.2;
  --text-4xl: 56px;

  --ls-tight: 0.01em;
  --ls-caps: 0.12em;

  /* Spacing (4px baseline) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --s-1: var(--space-1);   --s-2: var(--space-2);   --s-3: var(--space-3);
  --s-4: var(--space-4);   --s-5: var(--space-5);   --s-6: var(--space-6);
  --s-8: var(--space-8);   --s-10: var(--space-10); --s-12: var(--space-12);
  --s-16: var(--space-16); --s-20: var(--space-20);

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --radius-xl: 6px;
  --radius-full: 999px;
  --r-xs: var(--radius-xs);  --r-sm: var(--radius-sm);  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);  --r-xl: var(--radius-xl);  --r-full: var(--radius-full);

  /* Shadows — 低饱和茶色 */
  --shadow-xs: 0 1px 2px rgba(74, 51, 40, 0.06),
               0 0 0 1px rgba(74, 51, 40, 0.05);
  --shadow-sm: 0 1px 0 rgba(74, 51, 40, 0.05),
               0 6px 12px -8px rgba(74, 51, 40, 0.16);
  --shadow-md: 0 2px 0 rgba(74, 51, 40, 0.06),
               0 12px 22px -14px rgba(74, 51, 40, 0.30);
  --shadow-lg: 0 4px 5px 0 rgba(74, 51, 40, 0.10),
               0 16px 32px -16px rgba(74, 51, 40, 0.34);
  --shadow-glow: 0 6px 18px -6px rgba(192, 97, 58, 0.28),
                 0 1px 3px 0 rgba(74, 51, 40, 0.18);
  --focus-ring: 0 0 0 3px rgba(192, 97, 58, 0.18);

  /* Motion */
  --t-fast: 120ms var(--ease);
  --t-base: 180ms var(--ease);
  --t-slow: 280ms var(--ease);

  /* Topbar → 深色窄条 (C) */
  --topbar-h: 46px;
  --topbar-bg: #2a2018;
  --topbar-fg: #cdbfa8;
  --topbar-fg-muted: #a3957e;

  /* uploader 角色色 → 暗橄榄窄条 */
  --uploader-topbar-bg: #2c3320;
  --role-accent: var(--sage);

  /* Backward-compat aliases */
  --surface: var(--bg-elevated);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --fg-muted: var(--fg-2);
  --fg-subtle: var(--fg-3);
  --accent: var(--brand);
  --accent-fg: var(--brand-fg);
  --accent-soft: var(--brand-soft);
}

/* Role-scoped topbar override — uploader 入口用暗橄榄窄条 */
body.role-uploader {
  --topbar-bg: #2c3320;
  --topbar-fg: #cdbfa8;
  --topbar-fg-muted: #9aa886;
  --role-accent: var(--sage);
  --role-accent-soft: rgba(122, 154, 78, 0.18);
}

/* ─────────── 暖纸纹理 (很淡, 清晰为先; 挂到 html, page inline body{} 盖不动) ─────────── */
html {
  background: var(--paper);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px,
                              rgba(120, 90, 30, .025) 31px, rgba(120, 90, 30, .025) 32px),
    radial-gradient(ellipse at 10% 0%,  rgba(150, 100, 40, .03), transparent 30%),
    radial-gradient(ellipse at 90% 100%, rgba(150, 100, 40, .025), transparent 35%),
    radial-gradient(ellipse at 0% 80%,  rgba(180, 130, 60, .02), transparent 40%);
  background-attachment: fixed;
  min-height: 100vh;
}
/* 噪点底层 (很淡) */
html::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background-image: radial-gradient(circle at 1px 1px, rgba(120, 90, 30, .02) 1px, transparent 0);
  background-size: 3px 3px;
}
/* 四角受潮斑 (很淡) */
html::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(circle at 2% 4%,  rgba(120, 80, 20, .06) 0, transparent 4%),
    radial-gradient(circle at 97% 97%, rgba(120, 80, 20, .05) 0, transparent 5%),
    radial-gradient(circle at 3% 98%, rgba(120, 80, 20, .04) 0, transparent 3%),
    radial-gradient(circle at 98% 3%, rgba(120, 80, 20, .04) 0, transparent 4%);
}
body {
  font-family: var(--fb);
  color: var(--ink);
  background: transparent;
  line-height: 1.6;
  letter-spacing: .01em;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}