/* ============================================================================
   tokens.css — 设计变量（配色 / 字体 / 间距 / 圆角 / 阴影）
   ----------------------------------------------------------------------------
   风格定名「相纸与暖阳」：
     · 底色用相纸的暖米白，而不是纯白 —— 纯白在暖光下发青，看照片会偏色；
     · 主色用陶土橘（clay），刻意避开"蓝紫渐变 + 白卡片"那套到处都有的样子；
     · 标题用衬线体，做出纸质相册的旧感；正文用无衬线保证可读性；
     · 照片网格的圆角刻意做小（贴上去的照片），卡片圆角做大（相册页），
       两种圆角形成对比，界面才有层次而不是一片"胶囊"。

   字体说明：**不引外部字体**。中文字体包动辄几 MB，内网与弱网环境下加载不出来会很难看，
   而且这个客户端要能在没有外网的家庭网络里跑。所以用系统字体栈，
   靠字重、字距、行高与排版节奏来体现质感。
   同时显式带上 Noto Sans CJK SC / WenQuanYi Micro Hei，Linux 上不至于落到难看的默认字体。
   ============================================================================ */

:root {
  /* ---- 纸张与卡片 ---- */
  --paper:      #FBF4EA;   /* 主背景：暖米白 */
  --paper-2:    #F4E9DC;   /* 次级背景（分区、hover） */
  --paper-3:    #EDDECD;   /* 更深的暖底（分隔、禁用） */
  --card:       #FFFCF7;   /* 卡片：比纸更亮一点点，像覆了膜 */
  --line:       #E7D8C7;   /* 描边：暖色细线 */
  --line-soft:  #F0E5D8;

  /* ---- 主色：陶土橘 ---- */
  --clay:       #C2603C;
  --clay-deep:  #9C4728;   /* 按下 / 强调文字 */
  --clay-soft:  #F1D6C6;   /* 浅底（标签、选中背景） */
  --clay-wash:  #FAEDE4;   /* 极浅底（区块背景） */

  /* ---- 辅助色 ---- */
  --sun:        #D9992F;   /* 阳光杏黄：进度、待审 */
  --sun-soft:   #F7E4C2;
  --sage:       #6C8A66;   /* 灰绿：通过、安全 */
  --sage-soft:  #DFE8D8;
  --danger:     #B0423A;   /* 危险：柔和的红，不用刺眼的纯红 */
  --danger-soft:#F6DAD6;

  /* ---- 文字：暖褐，不用纯黑 ---- */
  --ink:        #40312A;
  --ink-2:      #6D594C;
  --ink-3:      #9C8878;
  --ink-invert: #FFF8F1;

  /* ---- 字体 ---- */
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Noto Sans CJK SC", "WenQuanYi Micro Hei", system-ui, sans-serif;
  --font-display: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC",
                  "Source Han Serif SC", Georgia, serif;

  /* ---- 间距（4 的倍数，避免出现 13px 这种说不清的间隙） ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* ---- 圆角：卡片大、照片小，形成对比 ---- */
  --r-card: 20px;
  --r-btn:  14px;
  --r-tile: 8px;      /* 照片缩略图：像贴在纸上的照片 */
  --r-pill: 999px;

  /* ---- 阴影：暖色调阴影，不用灰黑 ---- */
  --sh-1: 0 1px 2px rgba(122, 84, 58, .06);
  --sh-2: 0 2px 10px rgba(122, 84, 58, .08);
  --sh-3: 0 8px 28px rgba(122, 84, 58, .14);
  --sh-tile: 0 1px 3px rgba(122, 84, 58, .16), 0 0 0 1px rgba(255, 255, 255, .8) inset;

  /* ---- 动效 ---- */
  --ease: cubic-bezier(.22, .8, .3, 1);
  --dur: .22s;

  /* ---- 布局 ---- */
  --shell: 520px;     /* 移动优先；桌面上居中成"一页相册" */
  --tabbar-h: 62px;

  /* ---- 语义前景：提示框/标签上的文字 ----
     深浅两套取值差别很大（浅色底上是深棕字，深色底上必须是浅字），
     所以**不做成"算出来的"**，而是各给一套，避免深色下出现"深字压深底"糊成一团。 */
  --on-sun:    #7A5518;   /* 杏黄提示 */
  --on-sage:   #3F5638;   /* 灰绿提示 */
  --on-danger: #7E2F28;   /* 危险提示 */
  --tape-ink:  #6B4A2E;   /* 月份"胶带"标签上的字 */

  /* 让浏览器把表单控件、滚动条也按对应明暗渲染（否则深色页面里出现刺眼的白色下拉） */
  color-scheme: light;
}

/* ============================================================================
   深色取值（「夜色暖灯」）
   ----------------------------------------------------------------------------
   深色模式最容易犯的错：**只改了背景与正文色，忘了描边/阴影/占位符/禁用态**，
   结果夜里一片糊。所以下面把 tokens 里的每一项都成对给出（含 --line、--sh-*、
   --ink-3 这些最容易被漏掉的），测试会校验"亮色里的每个变量在深色里都有取值"。

   为什么不是纯黑：照片是暖色的，纯黑背景会让画面"发青"，而且对比过强反而晃眼。
   底色取暖调的近黑，主色把陶土橘提亮一档，保证在深底上仍然清晰。

   ⚠️ 下面这段（`:root[data-theme="dark"]`）与媒体查询里的那份必须保持一致 ——
   前者是用户手动选了深色，后者是"跟随系统"且脚本尚未跑起来时的兜底（避免白屏闪一下）。
   ============================================================================ */
:root[data-theme="dark"] {
  --paper:      #1C1512;
  --paper-2:    #241B17;
  --paper-3:    #2E231D;
  --card:       #251C17;
  --line:       #3A2C24;
  --line-soft:  #302520;

  --clay:       #D97B52;
  --clay-deep:  #E89A76;
  --clay-soft:  #4A2E22;
  --clay-wash:  #2A1E18;

  --sun:        #E2A54A;
  --sun-soft:   #3A2E18;
  --sage:       #8FB183;
  --sage-soft:  #22301F;
  --danger:     #E07A70;
  --danger-soft:#3A201E;

  --ink:        #F0E5DA;
  --ink-2:      #C9B8A9;
  --ink-3:      #9A8778;
  --ink-invert: #1C1512;

  --on-sun:    #E9C079;
  --on-sage:   #A9C79C;
  --on-danger: #EDA6A0;
  --tape-ink:  #D7B98E;

  /* 深色下的阴影要更黑更重，暖棕阴影在深底上会"消失"，等于没有层次 */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .45);
  --sh-2: 0 2px 10px rgba(0, 0, 0, .5);
  --sh-3: 0 8px 28px rgba(0, 0, 0, .6);
  --sh-tile: 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05) inset;

  color-scheme: dark;
}

/* 跟随系统 + 脚本尚未设置 data-theme 时的兜底（防白屏闪） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper:      #1C1512;
    --paper-2:    #241B17;
    --paper-3:    #2E231D;
    --card:       #251C17;
    --line:       #3A2C24;
    --line-soft:  #302520;

    --clay:       #D97B52;
    --clay-deep:  #E89A76;
    --clay-soft:  #4A2E22;
    --clay-wash:  #2A1E18;

    --sun:        #E2A54A;
    --sun-soft:   #3A2E18;
    --sage:       #8FB183;
    --sage-soft:  #22301F;
    --danger:     #E07A70;
    --danger-soft:#3A201E;

    --ink:        #F0E5DA;
    --ink-2:      #C9B8A9;
    --ink-3:      #9A8778;
    --ink-invert: #1C1512;

    --on-sun:    #E9C079;
    --on-sage:   #A9C79C;
    --on-danger: #EDA6A0;
    --tape-ink:  #D7B98E;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .45);
    --sh-2: 0 2px 10px rgba(0, 0, 0, .5);
    --sh-3: 0 8px 28px rgba(0, 0, 0, .6);
    --sh-tile: 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .05) inset;

    color-scheme: dark;
  }
}

/* 尊重系统的"减少动态效果"设置：眩晕敏感的用户不该被入场动画打扰 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}