/* ============================================================
   tokens.css — 设计变量
   方向：暖橙活力 + 圆润卡片
   注意：橙色 #F2762E 在奶油底上对比度仅约 3.1:1，
        因此只在「大字号 / 图形 / 图标」上使用，
        正文级文字强调一律走 --accent-ink (#C2551A, 约 4.6:1)。
   ============================================================ */

:root {
  /* ---------- 底色与表面 ---------- */
  --bg:            #FFF8F0;
  --bg-deep:       #FBEFE2;
  --surface:       #FFFFFF;
  --surface-sunk:  #FDF6EE;
  --surface-hover: #FFFBF6;

  /* ---------- 文字 ---------- */
  --ink:           #2E2A26;
  --ink-2:         #5C534B;
  --ink-3:         #8A8078;
  --ink-4:         #B5ABA1;

  /* ---------- 主强调：活力橙 ---------- */
  --accent:        #F2762E;
  --accent-ink:    #C2551A;   /* 可作正文的文字橙，对比度达 AA */
  --accent-soft:   #FFE9D8;
  --accent-softer: #FFF3E9;
  --accent-ring:   rgba(242, 118, 46, .28);

  /* ---------- 完成绿 ---------- */
  --done:          #4CAF87;
  --done-ink:      #2F7D5E;
  --done-soft:     #DCF3E9;

  /* ---------- 顺延警示（与主色同族但更暗、更沉） ---------- */
  --carry:         #E07A3C;
  --carry-ink:     #A8521C;
  --carry-soft:    #FDE9D8;

  /* ---------- 状态色 ---------- */
  --warn:          #D98E04;
  --warn-soft:     #FDF3D7;
  --danger:        #C4483C;
  --danger-soft:   #FBE4E1;

  /* ---------- 线条与阴影 ----------
     暖色阴影容易糊，所以一律低透明度 + 小 blur + 多层叠加，
     不用大面积模糊。 */
  --line:          #F0E4D8;
  --line-strong:   #E4D4C4;
  --sheen:         rgba(255, 255, 255, .7);   /* 卡片完成时扫过的柔光 */
  --shadow-1: 0 1px 2px rgba(180, 116, 60, .06);
  --shadow-2: 0 1px 2px rgba(180, 116, 60, .05),
              0 4px 10px rgba(180, 116, 60, .055);
  --shadow-3: 0 1px 2px rgba(180, 116, 60, .05),
              0 6px 16px rgba(180, 116, 60, .07),
              0 14px 32px rgba(180, 116, 60, .05);
  --shadow-pop: 0 2px 4px rgba(150, 90, 40, .10),
                0 12px 34px rgba(150, 90, 40, .16);

  /* ---------- 圆角 ---------- */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---------- 间距 ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 44px;

  /* ---------- 字号 ---------- */
  --f-2xs: 11px;
  --f-xs:  12px;
  --f-sm:  13px;
  --f-md:  15px;
  --f-lg:  17px;
  --f-xl:  21px;
  --f-2xl: 27px;
  --f-3xl: 36px;
  --f-4xl: 46px;

  /* ---------- 动效 ----------
     微交互 150–200ms，卡片进出 250–300ms。
     统一缓动，避免各处曲线不一致导致的「廉价感」。 */
  --t-micro: 160ms;
  --t-base:  220ms;
  --t-card:  280ms;
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in:   cubic-bezier(.55, 0, 1, .45);

  /* ---------- 布局 ---------- */
  --tabbar-h: 58px;
  --shell-max: 560px;

  /* ---------- 安全区（iPhone 刘海 / 底部横条） ---------- */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);

  /* ---------- 字体 ----------
     Nunito 需要联网加载，本项目「完全不联网」，
     因此用系统圆润无衬线优先的本地字体栈。 */
  --font: "Nunito", "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI",
          "Microsoft YaHei", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-num: "SF Pro Rounded", "Nunito", -apple-system, "Segoe UI",
              system-ui, sans-serif;
}

/* ---------- 暗色：跟随系统，但保留暖调 ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #1A1614;
    --bg-deep:       #141110;
    --surface:       #241E1B;
    --surface-sunk:  #1F1A17;
    --surface-hover: #2C2521;

    --ink:           #F2EAE2;
    --ink-2:         #C9BDB2;
    --ink-3:         #9A8D82;
    --ink-4:         #6E635B;

    --accent:        #FF8A44;
    --accent-ink:    #FFA469;
    --accent-soft:   #43301F;
    --accent-softer: #33261A;
    --accent-ring:   rgba(255, 138, 68, .30);

    --done:          #5CC79A;
    --done-ink:      #7EDCB4;
    --done-soft:     #1C3329;

    --carry:         #F0904E;
    --carry-ink:     #F2A876;
    --carry-soft:    #3B2A1C;

    --warn:          #E8B44C;
    --warn-soft:     #3A2F16;
    --danger:        #E8746A;
    --danger-soft:   #3D2220;

    --line:          #352D28;
    --line-strong:   #473C34;
    --sheen:         rgba(255, 190, 140, .16);  /* 深色底上白色柔光会刺眼，换成暖色低透明度 */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .26), 0 4px 10px rgba(0, 0, 0, .30);
    --shadow-3: 0 1px 2px rgba(0, 0, 0, .26), 0 6px 16px rgba(0, 0, 0, .34),
                0 14px 32px rgba(0, 0, 0, .26);
    --shadow-pop: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 34px rgba(0, 0, 0, .48);
  }
}