/* ============================================================
   小螃蟹 · Design Tokens
   专属前端的设计变量单一真相来源。真实build里 import 这一个文件，
   组件只通过 var(--token) 取色/取间距，不写死任何 hex/px。
   审美来源：Nest（暖白米黄底，私密、安静、克制）；
   强调色改用 Claude app 那种沉稳的黏土橙（clay），不是亮珊瑚。
   工程结构：8px 间距体系 + 语义化 token + 双主题。
   ============================================================ */

:root {
  /* ---- 暖中性色（带微粉/桃色偏，不是纯灰，是"选过的"中性） ---- */
  --paper:        #FAF6F2;  /* 页面底色，暖白 */
  --surface:      #FFFDFB;  /* 次级面，比卡片略暖 */
  --card:         #FFFFFF;  /* 卡片 */
  --border:       #EFE7DF;  /* 边框，暖发丝线 */
  --divider:      #F3ECE5;  /* 分隔线，比 border 更淡 */
  --ink:          #3A322E;  /* 主文字，暖棕黑，不是纯黑 */
  --ink-2:        #8B7F77;  /* 次要文字，暖褐灰 */
  --ink-3:        #A99E96;  /* 三级文字 / 图注 */
  --placeholder:  #BEB2A9;  /* 占位符 */

  /* ---- RGB三元组（供 rgba(var(--x-rgb),alpha) 用，让半透明叠色跟着主题翻转；
     2026.07.18词汇层重构新增，2.15任务） ---- */
  --paper-rgb:    250,246,242;
  --surface-rgb:  255,253,251;
  --card-rgb:     255,255,255;
  --border-rgb:   239,231,223;
  --divider-rgb:  243,236,229;
  --ink-rgb:      58,50,46;
  --ink-2-rgb:    139,127,119;
  --ink-3-rgb:    169,158,150;
  --shadow-rgb:   58,50,46;   /* 阴影专用，跟 --sh-* 系列的浅色调保持一致 */
  --scrim-rgb:    28,26,24;   /* 弹层背景遮罩，两主题固定不翻转（背景本来就该一直暗） */

  /* ---- 强调色（clay，Claude 风的深黏土橙，全屏占比 <10%） ---- */
  --clay:         #B46F58;  /* 主强调 */
  --clay-press:   #995C48;  /* 按下态 */
  --clay-soft:    #DDB8A9;  /* 描边/选中边 */
  --clay-wash:    #F4EAE5;  /* 极淡背景填充 */
  --clay-rgb:      180,111,88;
  --clay-soft-rgb: 221,184,169;

  /* ---- 装饰性专用色（不跟随主题翻转——头像渐变/Hearth打点这类强调图形本来就该保持鲜艳，
     跟"她不要镜子"那条同理：这些是具体的东西，不是可替换的语义色） ---- */
  --avatar-face-1:     #F4D9DC;
  --avatar-face-2:     #E9B8C0;
  --avatar-fallback-1: #F0C9AF;
  --avatar-fallback-2: #D9997B;
  --hearth-dot-predicted: #F6C6D2;
  --hearth-dot-period:    #E65F8F;
  --hearth-dot-weight:    #72B77A;

  /* ---- 副强调（mauve，用于 Mind/情绪可视化） ---- */
  --mauve:        #B4A3C0;
  --mauve-wash:   #F1EDF4;

  /* ---- 小螃蟹形象色（跟强调色分开，让蟹不融进按钮） ---- */
  --crab-body:    #B06B4E;  /* 棕陶土身体 */
  --crab-eye:     #2A2320;  /* 黑方眼 */
  --crab-mouth:   #8A4F38;
  --bulb:         #E8B84B;  /* 灯泡/闪光黄 */
  --heart:        #D2564E;  /* 爱心红 */

  /* ---- 语义色（跟强调色分开，不算 accent） ---- */
  --success:      #7BA67D;  --success-wash: #EDF3ED;
  --warning:      #D6A25C;  --warning-wash: #FAF1E3;
  --error:        #D07872;  --error-wash:   #FAEBE9;
  --info:         #8AA0B8;  --info-wash:    #ECF0F4;

  /* ---- 情绪标签色（日记多选 tag 用，低饱和） ---- */
  --mood-warm:    #E9A87C;  /* 暖 */
  --mood-sweet:   #E8969F;  /* 甜 */
  --mood-calm:    #9DB6C4;  /* 静 */
  --mood-flutter: #D98A96;  /* 心动 */
  --mood-fire:    #D98A6B;  /* 烈 */
  --mood-blue:    #8E9CC0;  /* 焖/闷 */

  /* ---- 圆角（2026.07.18 Oli 拍板：内容卡片默认走 --r-lg 16「适中」；扶正 14/18/28 三个高频档，
     对齐 design-system SKILL 布局节奏——小件 8–14 / 卡片 16–18 / 弹层 28） ---- */
  --r-sm:    8px;   /* 徽章、小件 */
  --r-md:   12px;   /* 输入框、小卡 */
  --r-14:   14px;   /* 事件卡 / 列表项（扶正：全 App 9 处） */
  --r-lg:   16px;   /* 内容卡片默认（Oli 选定「适中」） */
  --r-18:   18px;   /* 内容卡片主力档（扶正：17 处，SKILL 卡片值域上沿） */
  --r-xl:   24px;   /* 大卡 / 页面块 */
  --r-28:   28px;   /* 底部弹层（原先各处硬编码 28） */
  --r-full: 999px;  /* 胶囊 / 圆形 */

  /* ---- 间距（4px 基准；索引 = px÷4。2026.07.18 Oli 拍板扶正 10/14/18 三个高频中间档，
     命名沿用索引制：2.5→10、3.5→14、4.5→18，与 SKILL 间距值域 8/10/12/14/18/20 对齐） ---- */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-2-5: 10px;   /* 扶正：全 App 41 处，比 8px 还高频 */
  --sp-3:   12px;
  --sp-3-5: 14px;   /* 扶正：18 处 */
  --sp-4:   16px;   /* 卡片内边距默认（Oli 选定） */
  --sp-4-5: 18px;   /* 扶正：14 处 */
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;

  /* ---- 阴影（暖色调、柔和分层；制造深度不抢注意力） ---- */
  --sh-card:    0 1px 2px rgba(58,50,46,.04), 0 4px 14px rgba(58,50,46,.05);
  --sh-hover:   0 2px 4px rgba(58,50,46,.05), 0 8px 24px rgba(58,50,46,.07);
  --sh-pop:     0 4px 12px rgba(58,50,46,.08), 0 12px 32px rgba(58,50,46,.10);
  --sh-modal:   0 12px 32px rgba(58,50,46,.12), 0 24px 64px rgba(58,50,46,.14);
  --sh-focus:   0 0 0 3px rgba(190,103,73,.26);

  /* ---- 字体栈（CSP 禁外链字体，用系统栈；中文优先思源/苹方） ---- */
  --font-display: Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  /* ---- 字号刻度（2026.07.18 Oli 拍板：正文 15 / 小字 11；扶正 12、14 两个正文区高频档。
     内联样式里写死的 font-size 归化到这套 token；标题档保持现值不动，不引额外改动） ---- */
  --fs-1: 34px;   /* 页面大标题 (=.t-h1) */
  --fs-2: 26px;   /* 次级大标题 (=.t-h2) */
  --fs-3: 20px;   /* 区块标题 (=.t-h3) */
  --fs-4: 17px;   /* 卡片标题 / 抽屉项 (=.t-title) */
  --fs-5: 15px;   /* 正文（Oli 选定） (=.t-body / .t-sub) */
  --fs-6: 14px;   /* 正文小 / 气泡 / 按钮（扶正） (=.t-btn) */
  --fs-7: 13px;   /* 次要正文 / 图注 (=.t-cap) */
  --fs-8: 12px;   /* 元信息 / 小字（扶正） */
  --fs-9: 11px;   /* 标签 / 徽章（Oli 选定「小字 11」） (=.t-label) */

  /* ---- 动效 ---- */
  --ease:       cubic-bezier(.22,.61,.36,1);   /* ease-out 主曲线 */
  --dur-fast:   200ms;
  --dur-mid:    250ms;
  --dur-slow:   300ms;

  /* ---- 布局 ---- */
  --content-max: 1440px;
  --sidebar-w:   260px;
  --phone-w:     390px;   /* 移动优先，iPhone 逻辑宽 */
  --reading-w:   65ch;
  --glass-blur:  16px;
}

/* ---- 暗色主题（同等用心，不是简单反相） ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #1E1A18;
    --surface:     #262120;
    --card:        #2B2624;
    --border:      #3A332F;
    --divider:     #322C29;
    --ink:         #EFE7DF;
    --ink-2:       #A99E96;
    --ink-3:       #7E736C;
    --placeholder: #6B615B;

    --paper-rgb:   30,26,24;
    --surface-rgb: 38,33,32;
    --card-rgb:    43,38,36;
    --border-rgb:  58,51,47;
    --divider-rgb: 50,44,41;
    --ink-rgb:     239,231,223;
    --ink-2-rgb:   169,158,150;
    --ink-3-rgb:   126,115,108;
    --shadow-rgb:  0,0,0;      /* 跟 --sh-* night值一致，阴影在暗色下要真的沉下去，不是维持棕色 */
    --scrim-rgb:   28,26,24;   /* 固定值，两主题一致 */

    --clay:        #C27D62;
    --clay-press:  #AD6B52;
    --clay-soft:   #67493D;
    --clay-wash:   #30231E;
    --clay-rgb:      194,125,98;
    --clay-soft-rgb: 103,73,61;
    --mauve:       #BCACC8;
    --mauve-wash:  #2C2733;
    --crab-body:   #BC7754;

    --success-wash:#20291F; --warning-wash:#2E2618;
    --error-wash:  #2E1E1C; --info-wash:   #1E252B;

    --sh-card:  0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.34);
    --sh-hover: 0 2px 4px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.40);
    --sh-pop:   0 4px 12px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.46);
    --sh-modal: 0 12px 32px rgba(0,0,0,.50), 0 24px 64px rgba(0,0,0,.55);
    --sh-focus: 0 0 0 3px rgba(208,126,90,.32);
  }
}

/* ---- 主题切换钮显式覆盖（两个方向都要赢过 media query） ---- */
:root[data-theme="light"] {
  --paper:#FAF6F2; --surface:#FFFDFB; --card:#FFFFFF; --border:#EFE7DF; --divider:#F3ECE5;
  --ink:#3A322E; --ink-2:#8B7F77; --ink-3:#A99E96; --placeholder:#BEB2A9;
  --paper-rgb:250,246,242; --surface-rgb:255,253,251; --card-rgb:255,255,255;
  --border-rgb:239,231,223; --divider-rgb:243,236,229;
  --ink-rgb:58,50,46; --ink-2-rgb:139,127,119; --ink-3-rgb:169,158,150;
  --shadow-rgb:58,50,46; --scrim-rgb:28,26,24;
  --clay:#B46F58; --clay-press:#995C48; --clay-soft:#DDB8A9; --clay-wash:#F4EAE5;
  --clay-rgb:180,111,88; --clay-soft-rgb:221,184,169;
  --mauve:#B4A3C0; --mauve-wash:#F1EDF4; --crab-body:#B06B4E;
  --success-wash:#EDF3ED; --warning-wash:#FAF1E3; --error-wash:#FAEBE9; --info-wash:#ECF0F4;
  --sh-card:0 1px 2px rgba(58,50,46,.04),0 4px 14px rgba(58,50,46,.05);
  --sh-hover:0 2px 4px rgba(58,50,46,.05),0 8px 24px rgba(58,50,46,.07);
  --sh-pop:0 4px 12px rgba(58,50,46,.08),0 12px 32px rgba(58,50,46,.10);
  --sh-modal:0 12px 32px rgba(58,50,46,.12),0 24px 64px rgba(58,50,46,.14);
  --sh-focus:0 0 0 3px rgba(190,103,73,.26);
}
:root[data-theme="night"] {
  --paper:#1E1A18; --surface:#262120; --card:#2B2624; --border:#3A332F; --divider:#322C29;
  --ink:#EFE7DF; --ink-2:#A99E96; --ink-3:#7E736C; --placeholder:#6B615B;
  --paper-rgb:30,26,24; --surface-rgb:38,33,32; --card-rgb:43,38,36;
  --border-rgb:58,51,47; --divider-rgb:50,44,41;
  --ink-rgb:239,231,223; --ink-2-rgb:169,158,150; --ink-3-rgb:126,115,108;
  --shadow-rgb:0,0,0; --scrim-rgb:28,26,24;
  --clay:#C27D62; --clay-press:#AD6B52; --clay-soft:#67493D; --clay-wash:#30231E;
  --clay-rgb:194,125,98; --clay-soft-rgb:103,73,61;
  --mauve:#BCACC8; --mauve-wash:#2C2733; --crab-body:#BC7754;
  --success-wash:#20291F; --warning-wash:#2E2618; --error-wash:#2E1E1C; --info-wash:#1E252B;
  --sh-card:0 1px 2px rgba(0,0,0,.30),0 4px 14px rgba(0,0,0,.34);
  --sh-hover:0 2px 4px rgba(0,0,0,.34),0 8px 24px rgba(0,0,0,.40);
  --sh-pop:0 4px 12px rgba(0,0,0,.40),0 12px 32px rgba(0,0,0,.46);
  --sh-modal:0 12px 32px rgba(0,0,0,.50),0 24px 64px rgba(0,0,0,.55);
  --sh-focus:0 0 0 3px rgba(208,126,90,.32);
}

/* ============================================================
   字阶（type scale）— 作为工具类，真实 build 里可搬进组件
   ============================================================ */
.t-h1    { font-family:var(--font-display); font-size:34px; line-height:1.15; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.t-h2    { font-family:var(--font-display); font-size:26px; line-height:1.2;  font-weight:600; letter-spacing:-.005em; color:var(--ink); }
.t-h3    { font-family:var(--font-display); font-size:20px; line-height:1.3;  font-weight:600; color:var(--ink); }
.t-title { font-family:var(--font-body); font-size:17px; line-height:1.4; font-weight:600; color:var(--ink); }
.t-sub   { font-family:var(--font-body); font-size:15px; line-height:1.5; font-weight:500; color:var(--ink-2); }
.t-body  { font-family:var(--font-body); font-size:15px; line-height:1.65; font-weight:400; color:var(--ink); }
.t-cap   { font-family:var(--font-body); font-size:13px; line-height:1.5; font-weight:400; color:var(--ink-2); }
.t-btn   { font-family:var(--font-body); font-size:14px; line-height:1; font-weight:600; letter-spacing:.01em; }
.t-label { font-family:var(--font-body); font-size:11px; line-height:1.4; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }