/* 01-tokens.css
   唯一视觉：纸感+（档案纸 · 暖橙增强，2026-09-12 定稿）

   原始纸感的平涂问题：底 #F4EFE6 与纸白 #FCFAF4 明度比只有 1.03，卡片全靠描边撑着。
   本文件在原始 token 之上补：纸面落差、文字对比、状态色收敛、卡片物理感。
   主色 #C2410C 未改，信息架构未改。 */

:root{
  --bg:#F4EFE6;
  --surface:#FCFAF4;
  --surface-2:#F0E9DB;
  --surface-3:#EAE1CF;
  --line:#E0D6C3;
  --line-strong:#CBBEA6;

  --ink:#292219;
  --ink-2:#5C5344;
  --ink-3:#7A7060;

  --primary:#C2410C;
  --primary-soft:#FAE3D2;
  --on-primary:#FFFFFF;

  --ambient-top:#F5A93F;
  --ambient-mid:#F8C575;
  --ambient-soft:#FBE3B8;
  --ambient-fade:rgba(251,227,184,0);

  --accent:#8A5A2B;
  --accent-soft:#F0E2CC;
  --danger:#A62B2B;
  --danger-soft:#F6DCDC;
  --vdi-cancel:#8A5A2B;
  --vdi-cancel-deep:#5B3A1D;
  --success:#3D5A3E;
  --success-soft:#E4E8DB;
  --warning:#8A6D0B;
  --warning-soft:#F5EBCE;

  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;
  --s1:0 1px 0 rgba(41,34,25,.03);
  --s2:0 4px 14px rgba(41,34,25,.06);
  --s3:0 12px 32px rgba(41,34,25,.12);
  --tap:44px;
  --ease:cubic-bezier(.2,.8,.2,1);

  --doc-bg:#EAE3D4;
  --doc-panel:#FBF8F0;
  --doc-line:#D9CDB4;
}

/* 纸感细节：标题用衬线、导航加宽字距 */
/* 暖橙顶光：渐变固定在顶部、不随内容滚动 */
[data-style="paper"] .screen{
  background:
    linear-gradient(180deg,var(--ambient-top) 0%,var(--ambient-mid) 72px,var(--ambient-soft) 168px,var(--ambient-fade) 300px),
    var(--bg);
}
[data-style="paper"] .greet h1,
[data-style="paper"] .sec-title,
[data-style="paper"] .navbar{
  font-family:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
  letter-spacing:.5px;
}

/* ==========================================================================
   纸感+ 增强层（原「质感 A/B」的 on 状态，现为唯一视觉）
   ========================================================================== */

/* 纸面落差：底色比纸深，卡片才浮得起来 + 只留一条暖色天际线 */
:root{
  --bg:#EDE6D8;
  --surface:#FFFCF5;
  --surface-2:#F4EDDF;
  --surface-3:#EAE1CF;
  --line:#DCD1BB;
  --line-strong:#C2B49A;

  /* 文字与状态色各下移一档：标签不该和主按钮抢眼睛 */
  --ink-2:#544C3F;
  --ink-3:#685E50;
  --danger:#93231F;
  --success:#31543A;
  --warning:#755D08;
  --accent:#7A4E22;

  /* 主色压深一档专供小号文字：#C2410C 在纸底上只有 4.17:1，不过 AA */
  --primary-ink:#A8350A;

  /* 纸面阴影：投影极淡 + 顶边高光，模拟光从上方打在一张纸上 */
  --s1:0 1px 2px rgba(58,44,26,.05), 0 1px 0 rgba(255,255,255,.85) inset;
  --s2:0 2px 4px rgba(58,44,26,.06), 0 10px 26px rgba(58,44,26,.07), 0 1px 0 rgba(255,255,255,.9) inset;
  --s3:0 18px 40px rgba(58,44,26,.16), 0 1px 0 rgba(255,255,255,.7) inset;

  /* 顶光：从原来的 300px 收到 240px，别把整屏都烤热 */
  --ambient-top:#F2A044;
  --ambient-mid:#F7C77F;
  --ambient-soft:#FBE6C2;
}

/* 1 · 状态栏/导航压在暖光上，深色才够读（白字在 #F5A93F 上只有 1.98:1） */
.statusbar{color:#3A2A16}
.navbar{color:#2E2113}
.navbar::after{
  content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#2E2113 12%,transparent),transparent);
}
.capsule{
  background:color-mix(in srgb,#FFFCF5 78%,transparent);
  border-color:color-mix(in srgb,#2E2113 14%,transparent);
  box-shadow:0 1px 2px rgba(58,44,26,.06), 0 1px 0 rgba(255,255,255,.7) inset;
}
/* 三点是实心圆点；关闭键是空心环 + 环内小点，两者不能共用背景色 */
.capsule i{background:#3A2A16}
.capsule .circle{border-color:#3A2A16;background:transparent}
.capsule .circle::after{background:#3A2A16}

/* 2 · 卡片：描边 + 顶边高光 + 极淡投影，让「纸」真的离开桌面 */
.card{
  border-color:color-mix(in srgb,var(--line-strong) 62%,#fff);
  box-shadow:var(--s1);
}
.searchbar{
  background:var(--surface);
  border-color:color-mix(in srgb,var(--line-strong) 70%,#fff);
  box-shadow:var(--s1);
}
.pending-list-card,
.pcard,
.day-card{
  border-color:color-mix(in srgb,var(--line-strong) 62%,#fff);
  box-shadow:var(--s1);
}

/* 3 · 主按钮：微微的暖色渐变 + 内高光 + 环境投影（平涂最显「网页感」） */
.btn-primary{
  background:linear-gradient(180deg,#CE4E17 0%,var(--primary) 55%,#A93508 100%);
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 26%,transparent), 0 1px 0 rgba(255,255,255,.22) inset;
}
.btn-ghost{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.btn-primary:active,
.btn-ghost:active,
.appt-act:active,
.chip:active{transform:scale(.975)}
.btn-primary,
.btn-ghost,
.appt-act,
.chip{transition:transform .12s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}

/* 4 · 选中态：填充 + 同色柔光，不再是一块贴纸 */
.chip.on,
.pill-btn.on{
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 92%,#fff) 0%,var(--primary) 100%);
  box-shadow:0 2px 6px color-mix(in srgb,var(--primary) 24%,transparent), 0 1px 0 rgba(255,255,255,.18) inset;
}
.appt-act{
  background:color-mix(in srgb,#fff 72%,transparent);
  box-shadow:0 1px 2px color-mix(in srgb,var(--primary) 10%,transparent);
}
.appt-act.ghost{background:color-mix(in srgb,var(--surface) 40%,transparent);box-shadow:none}

/* 5 · 层级落锤：标题更「墨」，日期/说明更轻，给标题让路 */
.greet h1{font-weight:700;letter-spacing:-.4px}
.greet .sub,
.appt-note{color:var(--ink-3)}
.appt-time{font-variant-numeric:tabular-nums}
.sec-title{letter-spacing:.3px}

/* 6 · FAB：大按钮靠「大 + 远投影 + 轮廓光」跳出来，不靠加饱和度 */
.vdi{
  background:
    radial-gradient(circle at 34% 22%,rgba(255,246,232,.32),transparent 34%),
    linear-gradient(160deg,#D4671F 0%,var(--primary) 48%,#8B2B06 100%);
  box-shadow:
    0 14px 30px color-mix(in srgb,var(--primary) 34%,transparent),
    0 4px 10px rgba(58,44,26,.16),
    0 1px 0 rgba(255,255,255,.35) inset,
    0 0 0 1px color-mix(in srgb,var(--primary) 24%,transparent);
}

/* 7 · 纸厚 + 卷边 */
.screen{
  position:relative;
  box-shadow:
    0 10px 30px rgba(58,44,26,.08) inset,
    0 -1px 0 rgba(255,255,255,.55) inset,
    0 -30px 46px -34px rgba(58,44,26,.22) inset;
}

/* 8 · 交互反馈：按下去要「有回弹」，只给指针设备留 hover */
@media (hover:hover){
.card:hover{box-shadow:var(--s2)}
.btn-primary:hover{background:linear-gradient(180deg,#D85A20 0%,#B93C09 55%,#9D3006 100%)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
}