/* ==========================================================================
   00 · 设计令牌（design tokens）—— 情侣日记 · 手账主题册
   --------------------------------------------------------------------------
   四套主题，全部只在这里换颜色，其它 CSS 一个字都不用改：

     · 夏日薄荷（默认，就是下面第一块 `:root`）  data-theme="mint"（也可以不设）
     · 暖阳手账                                data-theme="sun"
     · 暗夜微光                                data-theme="dark"
     · 樱花粉                                  data-theme="sakura"

   令牌名与"人话"的对应（换主题就是换这一批值）：
     --c-bg            页面背景色            --c-surface       卡片底色
     --c-surface-2/3   次级 / 三级纸面        --c-paper-tint    米纸（小票、私密卡）
     --c-ink           正文文字色            --c-ink-muted     弱化文字
     --c-primary       主色（按钮、链接）     --c-primary-soft  主色的浅档（胶带、选中）
     --c-gold          点缀色（淡金 / 浅橘）  --c-line          边框线
     --shadow-paper/--shadow-note/--shadow-lift   纸张阴影（三套，别用大阴影）
     --font-title / --font-body / --fw-title / --fw-body  字体与字重（跟着主题微调）

   规矩（tools/check.mjs 会盯着，别破）：
   · 全项目**只有这个文件**允许出现 #hex / rgb() / hsl() 字面量；
     其余 CSS 一律用 var(--…) 或 color-mix(in srgb, …)。
   · 任何 CSS 里用到的 var(--x) 都必须在这里声明（含 --tilt / --nudge / --lift /
     --tape-* 这类"局部变量"，也要给默认值）。
   · 每个主题块都要有 ≥15 个 6 位 hex（对比度检查逐个主题算）。
   · 字体全程"楷体 / 宋体 / 打字机"，**不许出现任何无衬线字体**。
   · 不用紫色、不用玻璃拟态、不用大圆角与厚阴影。
   · 主题块里给的是"设计意图"的浅色档（用户点名的 hex 原样保留在
     --c-primary-soft / --c-primary-tint-2 / --c-gold 上）；真正当文字和按钮底的
     --c-primary / --c-primary-strong 会更深一档，为了过 4.5:1 的对比度门槛。
   ========================================================================== */

/* ==========================================================================
   主题一 · 夏日薄荷（默认）：奶油白 + 薄荷绿 + 淡金
   背景 #F8FFFE / #F0FAF8 · 主色 #A8E6CF / #B2DFDB · 文字 #2C4A3E · 点缀 #E6C79C
   ========================================================================== */

:root {
  /* ---------- 纸面与底色：被阳光晒过的纸 ---------- */
  --c-bg: #F8FFFE;
  --c-bg-warm: #F0FAF8;
  --c-surface: #FFFFFF;
  --c-surface-2: #F0FAF8;
  --c-surface-3: #E4F3EE;
  --c-paper-tint: #FFFDF7;

  /* ---------- 墨色：深灰绿，不是纯黑 ---------- */
  --c-ink: #2C4A3E;
  --c-ink-muted: #4E6E62;
  --c-ink-faint: #7E9A8F;

  /* ---------- 线：手账的细边框 ---------- */
  --c-line: #62857A;
  --c-line-soft: #D8EAE4;
  --c-line-dash: #BFDCD3;

  /* ---------- 薄荷主色：深的一档做文字 / 按钮，浅的三档做纸面 ---------- */
  --c-primary: #1F6B57;
  --c-primary-strong: #14503F;
  --c-primary-soft: #A8E6CF;
  --c-primary-tint: #D4F0E8;
  --c-primary-tint-2: #B2DFDB;
  --c-on-primary: #FFFFFF;

  /* ---------- 点缀：淡金 + 干净的白 ---------- */
  --c-gold: #E6C79C;
  --c-gold-soft: #F5E9D4;
  --c-gold-deep: #7A5A22;

  /* ---------- 语义色 ---------- */
  --c-success: #2F7D5A;
  --c-warning: #7A5A22;
  --c-danger: #A8402F;
  --c-info: #2C4A3E;
  --c-danger-soft: #F7E3DC;
  --c-focus: #1F6B57;

  /* ---------- 顶栏：一条深薄荷的边 ---------- */
  --c-head-bg: #1F6B57;
  --c-head-bg-2: #17513F;
  --c-head-ink: #F8FFFE;
  --c-head-ink-muted: #C9E6DC;
  --c-head-on: #FFFFFF;

  /* ---------- 迷你日记的标签小圆片（一色一类，一眼分得开） ---------- */
  --c-tag-like: #A8E6CF;
  --c-tag-like-ink: #14503F;
  --c-tag-mood: #F7D7DE;
  --c-tag-mood-ink: #7C3A4C;
  --c-tag-trait: #F3E4CC;
  --c-tag-trait-ink: #7A5A22;
  --c-tag-daily: #CFE9E4;
  --c-tag-daily-ink: #1F5B4E;
  --c-tag-casual: #E3EFE7;
  --c-tag-casual-ink: #3D5B4F;

  /* ---------- 阴影：只有纸张级的一点点，绝不悬浮 ---------- */
  --shadow-paper: 0 1px 0 rgba(44, 74, 62, .07), 0 2px 4px -2px rgba(44, 74, 62, .13), 0 12px 22px -18px rgba(44, 74, 62, .45);
  --shadow-note: 0 1px 0 rgba(44, 74, 62, .06), 0 5px 12px -9px rgba(44, 74, 62, .4);
  --shadow-lift: 0 2px 0 rgba(44, 74, 62, .05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);
  --shadow-tape: 0 1px 2px rgba(44, 74, 62, .1);

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* ---------- 圆角：几乎没有（小圆片除外） ---------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* ---------- 字体：三档，全部系统自带（不引外部 Web Font） ----------
     ① 标题（导航标签 / 页面大标题 / 卡片里的日记标题）：楷体，带手写感
     ② 正文（日记内容 / 输入框 / 说明文字）：宋体，纸质书卷感
     ③ 日期与数字（日期、时间、计数）：等宽，打字机对齐感
     四套主题共用这一套；主题只微调字重与个别字距。 */
  --font-title: "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", Georgia, "Times New Roman", serif;
  --font-body: "Songti SC", "STSong", "SimSun", "Songti TC", Georgia, "Times New Roman", serif;
  --font-mono: "Courier New", "Consolas", "Lucida Console", Courier, monospace;
  --fw-title: 400;
  --fw-body: 400;
  --fw-strong: 700;

  /* ---------- 字号 ---------- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;

  /* ---------- 行高与字距：正文 1.75，字距比原来松一点（≈0.5px） ---------- */
  --lh-tight: 1.4;
  --lh-base: 1.75;
  --lh-loose: 2;
  --ls-base: .03em;
  --ls-title: .05em;

  /* ---------- 动效 ---------- */
  --dur-fast: .16s;
  --dur-base: .28s;
  --dur-slow: .5s;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---------- 层级与尺寸 ---------- */
  --z-deco: 0;
  --z-base: 1;
  --z-sticky: 20;
  --z-space: 60;
  --z-game: 70;
  --z-gate: 80;
  --z-toast: 90;
  --topbar-h: 60px;
  --page-max: 1200px;
  --col-composer: 336px;
  --press-scale: .97;

  /* ---------- 纸张噪点（纯 CSS 质感，SVG 滤镜；data URI 里 # 必须写成 %23） ---------- */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  --paper-noise-size: 160px 160px;
  --paper-noise-opacity: .5;
  --paper-noise-blend: multiply;
  /* 卡片自己用的那层纸纹：比整页的更淡，免得白便签看起来"脏" */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");

  /* ---------- 纸面上的三层水汽晕染（纯色径向渐变，没有紫色） ---------- */
  --paper-wash-1: radial-gradient(120% 70% at 50% -12%, rgba(168, 230, 207, .3), rgba(248, 255, 254, 0) 62%);
  --paper-wash-2: radial-gradient(78% 52% at 102% 6%, rgba(212, 240, 232, .55), rgba(248, 255, 254, 0) 58%);
  --paper-wash-3: radial-gradient(70% 48% at -6% 22%, rgba(230, 199, 156, .18), rgba(248, 255, 254, 0) 56%);

  /* ---------- 便签的随机错落：逐张覆盖，默认必须"不歪" ---------- */
  --tilt: 0deg;
  --nudge: 0px;
  --lift: 0px;

  /* ---------- 胶带贴纸（跟着主题的主色/点缀色走，不用逐套改） ---------- */
  --tape-w: 78px;
  --tape-h: 20px;
  --tape-x: 18px;
  --tape-rot: -4deg;
  --tape-c: var(--c-primary-soft);
  --tape-c-2: var(--c-gold-soft);

  /* ---------- 长日记折叠（折起来露几行） ---------- */
  --clamp-lines: 4;

  /* ---------- 主题按钮上的四个小圆点 ----------
     这里的默认值 = 夏日薄荷那一套（四个圆点用哪几个颜色由各主题自己的 --swatch-* 决定）。
     必须有默认值：components.css 里用到了 var(--sw-1…4)，令牌缺一个就会被自检拦下。 */
  --sw-1: var(--swatch-mint-1);
  --sw-2: var(--swatch-mint-2);
  --sw-3: var(--swatch-mint-3);
  --sw-4: var(--swatch-mint-4);

  /* ---------- 「我的空间」里四个主题按钮的小圆点预览色板 ----------
     这几个是**四套主题各自的色**，不随当前主题变化，所以写在这里一份就够。
     每个主题 4 个点：文字色 / 主色 / 点缀色 / 背景色。 */
  --swatch-mint-1: #2C4A3E;
  --swatch-mint-2: #1F6B57;
  --swatch-mint-3: #A8E6CF;
  --swatch-mint-4: #E6C79C;
  --swatch-sun-1: #4A3728;
  --swatch-sun-2: #8A5A2B;
  --swatch-sun-3: #D4A373;
  --swatch-sun-4: #E9B384;
  --swatch-dark-1: #E8F0EC;
  --swatch-dark-2: #7FBFA8;
  --swatch-dark-3: #C9A96E;
  --swatch-dark-4: #1A2E2A;
  --swatch-sakura-1: #4A2C33;
  --swatch-sakura-2: #A8405A;
  --swatch-sakura-3: #F4B6C2;
  --swatch-sakura-4: #E6C79C;
}

/* ==========================================================================
   主题二 · 暖阳手账：浅米色 / 牛皮纸色 + 暖棕 + 浅橘
   背景 #FDF6E3 / #F5E6C8 · 主色 #D4A373 / #C68B59 · 文字 #4A3728 · 点缀 #E9B384
   字体联动：稍微加粗的楷体、字距略放宽，像牛皮纸上的记号笔
   ========================================================================== */

:root[data-theme="sun"] {
  --c-bg: #FDF6E3;
  --c-bg-warm: #F5E6C8;
  --c-surface: #FFFCF5;
  --c-surface-2: #F7EBD6;
  --c-surface-3: #F1E2C8;
  --c-paper-tint: #FFFDF8;

  --c-ink: #4A3728;
  --c-ink-muted: #6E5642;
  --c-ink-faint: #8A7259;

  --c-line: #8A6A42;
  --c-line-soft: #EADCC2;
  --c-line-dash: #DCC9A6;

  --c-primary: #8A5A2B;
  --c-primary-strong: #6B4318;
  --c-primary-soft: #D4A373;
  --c-primary-tint: #F3E3CB;
  --c-primary-tint-2: #C68B59;
  --c-on-primary: #FFFDF8;

  --c-gold: #E9B384;
  --c-gold-soft: #F7E7D2;
  --c-gold-deep: #7A4A1E;

  --c-success: #3F6B33;
  --c-warning: #8A5A2B;
  --c-danger: #A8402F;
  --c-info: #4A3728;
  --c-danger-soft: #F6E0D5;
  --c-focus: #8A5A2B;

  --c-head-bg: #6B4318;
  --c-head-bg-2: #573413;
  --c-head-ink: #FDF6E3;
  --c-head-ink-muted: #E2CFB0;
  --c-head-on: #E9B384;

  --c-tag-like: #E5C79B;
  --c-tag-like-ink: #6B4318;
  --c-tag-mood: #F2CFC4;
  --c-tag-mood-ink: #7C3A2C;
  --c-tag-trait: #EFD9B4;
  --c-tag-trait-ink: #6B4A18;
  --c-tag-daily: #DCCDB2;
  --c-tag-daily-ink: #4A3728;
  --c-tag-casual: #E7DCC6;
  --c-tag-casual-ink: #4A3728;

  --shadow-paper: 0 1px 0 rgba(74, 55, 40, .08), 0 2px 4px -2px rgba(74, 55, 40, .15), 0 12px 22px -18px rgba(74, 55, 40, .45);
  --shadow-note: 0 1px 0 rgba(74, 55, 40, .07), 0 5px 12px -9px rgba(74, 55, 40, .4);
  --shadow-lift: 0 2px 0 rgba(74, 55, 40, .06);
  --shadow-inset: inset 0 1px 0 rgba(255, 253, 248, .7);
  --shadow-tape: 0 1px 2px rgba(74, 55, 40, .12);

  --paper-noise-opacity: .5;
  --paper-noise-blend: multiply;

  --paper-wash-1: radial-gradient(120% 70% at 50% -12%, rgba(212, 163, 115, .3), rgba(253, 246, 227, 0) 62%);
  --paper-wash-2: radial-gradient(78% 52% at 102% 6%, rgba(245, 230, 200, .6), rgba(253, 246, 227, 0) 58%);
  --paper-wash-3: radial-gradient(70% 48% at -6% 22%, rgba(233, 179, 132, .22), rgba(253, 246, 227, 0) 56%);

  /* 字体：三档字体四套主题共用（见文件顶部），这套只是标题稍粗，牛皮纸手感 */
  --fw-title: 700;
  --fw-body: 400;
}

/* ==========================================================================
   主题三 · 暗夜微光：深墨绿 + 淡薄荷 + 暗金
   背景 #1A2E2A / #22322E · 主色 #7FBFA8 · 文字 #E8F0EC · 点缀 #C9A96E
   字体联动：正文换成细一点的宋体，行高再放宽一点
   ========================================================================== */

:root[data-theme="dark"] {
  --c-bg: #1A2E2A;
  --c-bg-warm: #22322E;
  --c-surface: #22322E;
  --c-surface-2: #27403A;
  --c-surface-3: #2E4A42;
  --c-paper-tint: #24382F;

  --c-ink: #E8F0EC;
  --c-ink-muted: #AFC6BC;
  --c-ink-faint: #8AA69B;

  --c-line: #7CAA99;
  --c-line-soft: #314A43;
  --c-line-dash: #3A5A50;

  --c-primary: #7FBFA8;
  --c-primary-strong: #A8DCC6;
  --c-primary-soft: #2E564A;
  --c-primary-tint: #233F37;
  --c-primary-tint-2: #2C4F45;
  --c-on-primary: #10231D;

  --c-gold: #C9A96E;
  --c-gold-soft: #3A3427;
  --c-gold-deep: #D8BE8A;

  --c-success: #7FD3AA;
  --c-warning: #C9A96E;
  --c-danger: #E89B8A;
  --c-info: #AFC6BC;
  --c-danger-soft: #3A211B;
  --c-focus: #7FBFA8;

  --c-head-bg: #16261F;
  --c-head-bg-2: #101E19;
  --c-head-ink: #E8F0EC;
  --c-head-ink-muted: #9FBDB0;
  --c-head-on: #C9A96E;

  --c-tag-like: #2E5A4B;
  --c-tag-like-ink: #CFE9DC;
  --c-tag-mood: #4A3138;
  --c-tag-mood-ink: #F5D3DA;
  --c-tag-trait: #443B28;
  --c-tag-trait-ink: #EBD9B4;
  --c-tag-daily: #2A4741;
  --c-tag-daily-ink: #CBE7DF;
  --c-tag-casual: #2A3A31;
  --c-tag-casual-ink: #DCEAE1;

  --shadow-paper: 0 1px 0 rgba(0, 0, 0, .38), 0 2px 5px -2px rgba(0, 0, 0, .42), 0 14px 24px -18px rgba(0, 0, 0, .7);
  --shadow-note: 0 1px 0 rgba(0, 0, 0, .34), 0 6px 14px -9px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 0 rgba(0, 0, 0, .26);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-tape: 0 1px 2px rgba(0, 0, 0, .38);

  --paper-noise-opacity: .34;
  --paper-noise-blend: screen;

  --paper-wash-1: radial-gradient(120% 70% at 50% -12%, rgba(127, 191, 168, .16), rgba(26, 46, 42, 0) 60%);
  --paper-wash-2: radial-gradient(78% 52% at 102% 6%, rgba(46, 86, 74, .5), rgba(26, 46, 42, 0) 58%);
  --paper-wash-3: radial-gradient(70% 48% at -6% 22%, rgba(201, 169, 110, .12), rgba(26, 46, 42, 0) 55%);

  /* 字体：同样走三档（楷体标题 / 宋体正文 / 等宽数字），深色下不加粗 */
  --fw-title: 400;
  --fw-body: 400;
}

/* ==========================================================================
   主题四 · 樱花粉：浅粉白 + 樱花粉 + 淡金
   背景 #FFF5F7 / #FDE8EC · 主色 #F4B6C2 / #E89BA9 · 文字 #4A2C33 · 点缀 #E6C79C
   字体联动：楷体，标题字距再放松一点
   ========================================================================== */

:root[data-theme="sakura"] {
  --c-bg: #FFF5F7;
  --c-bg-warm: #FDE8EC;
  --c-surface: #FFFCFD;
  --c-surface-2: #FDE8EC;
  --c-surface-3: #F8DCE3;
  --c-paper-tint: #FFF3F6;

  --c-ink: #4A2C33;
  --c-ink-muted: #6E4A52;
  --c-ink-faint: #96757D;

  --c-line: #9C6270;
  --c-line-soft: #F2D9DF;
  --c-line-dash: #E7C4CC;

  --c-primary: #A8405A;
  --c-primary-strong: #832B44;
  --c-primary-soft: #F4B6C2;
  --c-primary-tint: #FDE8EC;
  --c-primary-tint-2: #E89BA9;
  --c-on-primary: #FFFFFF;

  --c-gold: #E6C79C;
  --c-gold-soft: #F7EBD8;
  --c-gold-deep: #7A5A22;

  --c-success: #2F7D5A;
  --c-warning: #7A5A22;
  --c-danger: #A8402F;
  --c-info: #4A2C33;
  --c-danger-soft: #F7E3DC;
  --c-focus: #A8405A;

  --c-head-bg: #A8405A;
  --c-head-bg-2: #8E3349;
  --c-head-ink: #FFF5F7;
  --c-head-ink-muted: #F9E2E7;
  --c-head-on: #FFFFFF;

  --c-tag-like: #F4B6C2;
  --c-tag-like-ink: #832B44;
  --c-tag-mood: #F7D7DE;
  --c-tag-mood-ink: #7C3A4C;
  --c-tag-trait: #F3E4CC;
  --c-tag-trait-ink: #7A5A22;
  --c-tag-daily: #D9E7DE;
  --c-tag-daily-ink: #2F5B49;
  --c-tag-casual: #EFE3E7;
  --c-tag-casual-ink: #5A3A42;

  --shadow-paper: 0 1px 0 rgba(74, 44, 51, .07), 0 2px 4px -2px rgba(74, 44, 51, .14), 0 12px 22px -18px rgba(74, 44, 51, .45);
  --shadow-note: 0 1px 0 rgba(74, 44, 51, .06), 0 5px 12px -9px rgba(74, 44, 51, .4);
  --shadow-lift: 0 2px 0 rgba(74, 44, 51, .05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .65);
  --shadow-tape: 0 1px 2px rgba(74, 44, 51, .1);

  --paper-noise-opacity: .5;
  --paper-noise-blend: multiply;

  --paper-wash-1: radial-gradient(120% 70% at 50% -12%, rgba(244, 182, 194, .32), rgba(255, 245, 247, 0) 62%);
  --paper-wash-2: radial-gradient(78% 52% at 102% 6%, rgba(253, 232, 236, .6), rgba(255, 245, 247, 0) 58%);
  --paper-wash-3: radial-gradient(70% 48% at -6% 22%, rgba(230, 199, 156, .2), rgba(255, 245, 247, 0) 56%);

  /* 字体：同三档，粉调靠颜色不靠换字体 */
  --fw-title: 400;
  --fw-body: 400;
}

/* ==========================================================================
   对比度规格（tools/check.mjs 读取这段，**每套主题**逐条算真实比值）
   写法必须是"真令牌名 / 真令牌名 >= 阈值"；末尾 `~ 1` 表示只记录、不算失败。
   ========================================================================== */

@contrast
--c-ink / --c-bg >= 4.5
--c-ink / --c-surface >= 4.5
--c-ink / --c-surface-3 >= 4.5
--c-ink-muted / --c-bg >= 4.5
--c-ink-muted / --c-surface-2 >= 4.5
--c-primary / --c-bg >= 4.5
--c-primary / --c-surface >= 4.5
--c-on-primary / --c-primary >= 4.5
--c-primary-strong / --c-bg >= 4.5
--c-focus / --c-bg >= 3
--c-line / --c-surface >= 3
--c-line / --c-bg >= 3
--c-line / --c-surface-2 >= 3
--c-line / --c-surface-3 >= 3
--c-success / --c-bg >= 4.5
--c-warning / --c-bg >= 4.5
--c-danger / --c-bg >= 4.5
--c-info / --c-bg >= 4.5
--c-gold-deep / --c-gold-soft >= 4.5
--c-head-ink / --c-head-bg >= 4.5
--c-head-ink-muted / --c-head-bg >= 4.5
--c-head-bg / --c-head-on >= 4.5
--c-tag-like-ink / --c-tag-like >= 4.5
--c-tag-mood-ink / --c-tag-mood >= 4.5
--c-tag-trait-ink / --c-tag-trait >= 4.5
--c-tag-daily-ink / --c-tag-daily >= 4.5
--c-tag-casual-ink / --c-tag-casual >= 4.5
--c-ink-faint / --c-bg >= 3
--c-line-soft / --c-surface >= 1 ~ 1

/* ===== 令牌表到此结束 ===== */