/* ============================================================
   tokens.css —— 公约府文化体验版块 · 设计 token 注册表
   ============================================================
   对应《02-ARCH-系统架构》§7 四小只主题体系：
   - 共享基座 token（字体/圆角/留白/卡片/导航）全站一致
   - 版块差异只体现在色板 + 角色贴纸 + 贴纸边框（body[data-theme] 切换）
   - 前端零硬编码色值：页面只用 var(--xxx)
   - 四小只官方原图待交付（待确认项 #10），当前用 CSS 圆形贴纸占位，
     接入官方素材后仅需替换 components.css 中 .sticker 的背景实现。
   ============================================================ */

/* ---------- 1. 共享基座 token（全站一致，禁止按版块覆盖） ---------- */
:root {
  /* 字体：正文系统字体栈，标题衬线增强书卷气 */
  --font-base: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "SimSun", "Georgia", serif;

  /* 字号阶梯（正文 16px / 行高 1.7） */
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
  --line-h: 1.7;

  /* 圆角：卡片 12px、按钮 pill */
  --radius-card: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* 留白阶梯 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* 卡片 / 阴影 */
  --shadow-card: 0 1px 3px rgba(60, 50, 30, 0.06), 0 4px 12px rgba(60, 50, 30, 0.05);
  --shadow-float: 0 6px 24px rgba(60, 50, 30, 0.14);

  /* 中性暖色板（手账纸页触感基座） */
  --bg: #F5F0E6;            /* 纸页底色 */
  --bg-soft: #FBF8F1;       /* 更浅的纸色 */
  --card: #FFFDF8;          /* 卡片白 */
  --line: #E8E0CF;          /* 细边框 */
  --line-strong: #D5CBB4;   /* 强调边框/手绘线 */
  --ink: #37332A;           /* 主文字 */
  --ink-2: #6E6757;         /* 次级文字 */
  --ink-3: #A49A85;         /* 辅助文字/占位 */
  --mask: rgba(45, 40, 30, 0.45);   /* 弹窗遮罩 */

  /* 语义色（与版块主题色冲突时优先用语义色，见可见性角标规范） */
  --danger: #C0503A;
  --danger-soft: #F6E3DC;
  --warn: #B97E2C;
  --ok: #44845E;

  /* 布局：移动端基准 375px，PC 居中容器上限 */
  --app-max: 480px;

  /* 今日曦流类型色标（仅作 4px 侧条/角标，禁止铺满 —— 交互设计 §1.3/§5） */
  --feed-xjy: #3E8E5F;
  --feed-night: #3D7CB8;
  --feed-praise: #E07B39;
  --feed-person: #C96E8E;
  --feed-sign: #B97E2C;

  /* 过渡 */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.25s;
}

/* ============================================================
   2. 版块主题注册表（body[data-theme] 切换）
   每个主题只覆盖：主色/辅助色/角色贴纸/价值观标签
   共享基座 token 在 :root 定义，任何主题不得覆盖
   ============================================================ */

/* 2.1 曦游记 —— 阿信 · 相信 · 绿色 */
body[data-theme="xjy"] {
  --theme-primary: #3E8E5F;
  --theme-primary-strong: #2E704A;
  --theme-soft: #E3F0E4;
  --theme-tint: #EFF6EC;        /* 页头/区块淡染 */
  --theme-role: "阿信";
  --theme-value: "相信";
  --theme-sticker-bg: #F2F8EE;
}

/* 2.2 无限夜话 —— 享享 · 分享 · 蓝色 */
body[data-theme="night"] {
  --theme-primary: #3D7CB8;
  --theme-primary-strong: #2F6395;
  --theme-soft: #E0EAF5;
  --theme-tint: #EDF3FA;
  --theme-role: "享享";
  --theme-value: "分享";
  --theme-sticker-bg: #F1F6FB;
}

/* 2.3 夸夸温泉 —— 抱抱 · 拥抱 · 橙色 */
body[data-theme="praise"] {
  --theme-primary: #E07B39;
  --theme-primary-strong: #BE5F22;
  --theme-soft: #F8E4CF;
  --theme-tint: #FAEFE2;
  --theme-role: "抱抱";
  --theme-value: "拥抱";
  --theme-sticker-bg: #FDF3E8;
}

/* 2.4 爱C友·公约纪 —— 嗯 · 感恩 · 粉色 */
body[data-theme="person"] {
  --theme-primary: #C96E8E;
  --theme-primary-strong: #A8506F;
  --theme-soft: #F5DEE6;
  --theme-tint: #F9ECF0;
  --theme-role: "嗯";
  --theme-value: "感恩";
  --theme-sticker-bg: #FDF2F5;
}

/* 2.5 每日一签 —— 跟随当前季度价值观（demo 固定为感恩·粉色）
   真实环境由 season_config 表动态映射（02-ARCH §6.1），
   接入后端后 body 的 data-theme 由接口返回的季度主题 key 决定 */
body[data-theme="sign"] {
  --theme-primary: #C96E8E;
  --theme-primary-strong: #A8506F;
  --theme-soft: #F5DEE6;
  --theme-tint: #F9ECF0;
  --theme-role: "嗯";
  --theme-value: "感恩";
  --theme-sticker-bg: #FDF2F5;
}

/* 2.6 中立基座（首页/聚合页/个人中心）：无主题色，靠类型色标区分 */
body[data-theme="base"], body:not([data-theme]) {
  --theme-primary: #6E6757;      /* 中性深棕，按钮/高亮用 */
  --theme-primary-strong: #57503F;
  --theme-soft: #EFE9DB;
  --theme-tint: #F3EEE2;
  --theme-role: "";
  --theme-value: "";
  --theme-sticker-bg: #F7F2E7;
}

/* 各主题下角色贴纸的占位文案（components.css .sticker 使用） */
body[data-theme="xjy"]    .sticker::after { content: "阿信"; }
body[data-theme="night"]  .sticker::after { content: "享享"; }
body[data-theme="praise"] .sticker::after { content: "抱抱"; }
body[data-theme="person"] .sticker::after { content: "嗯"; }
body[data-theme="sign"]   .sticker::after { content: "嗯"; }
body[data-theme="base"]   .sticker::after, body:not([data-theme]) .sticker::after { content: "立方"; }