/* theme.css — 设计令牌 v3
 *
 * 这一版的目标是把"干净的浅色站"推到"有层次的杂志感"：
 *   · 颜色仍取自头像（奶白 / 苔绿 / 暖金 / 腮红），但加深了正文色，提高对比；
 *   · 字体分三档：Fraunces（拉丁与数字）、思源宋体（中文标题）、HarmonyOS Sans（正文）；
 *   · 阴影改成"暖灰 + 双层"（近处细影 + 远处大影），卡片才有厚度。
 */
@layer reset, base, components, page;

:root {
  /* ── 表面 ─────────────────────────────────────────── */
  --cream-50:  #fffdf8;
  --cream-100: #fbf6ec;
  --cream-200: #f4ebda;
  --cream-300: #ecdfc9;

  --bg:        var(--cream-100);
  --bg-deep:   #efe4d0;
  --panel:     var(--cream-50);
  --panel-2:   #f8f1e2;
  --panel-3:   #f0e6d3;
  --border:    #e6d8c0;
  --border-soft: #efe4d2;

  /* ── 文字：深林绿棕，比上一版更沉 ─────────────────── */
  --ink-900:   #232a1e;
  --ink-700:   #46503b;
  --ink-500:   #6f7763;
  --text:      var(--ink-900);
  --text-dim:  var(--ink-700);
  --text-mute: var(--ink-500);

  /* ── 强调色 ───────────────────────────────────────── */
  --sage-700:  #46652f;
  --sage-600:  #557a3d;
  --sage-500:  #6f9a53;
  --sage-300:  #b9d09c;
  --sage-100:  #e9f1dc;

  --gold-600:  #b3822f;
  --gold-500:  #d3a34a;
  --gold-300:  #ecd08f;
  --gold-100:  #f9efd6;

  --blush-500: #e3a49b;
  --blush-100: #fbeae5;

  --accent:      var(--sage-600);
  --accent-deep: var(--sage-700);
  --accent-ink:  var(--cream-50);
  --accent-soft: var(--sage-100);
  --accent-line: var(--sage-300);

  /* 兼容别名：早期样式里用的是 --gold / --blush / --sage-400，
     这里保留它们指向新令牌，省得逐个文件改（也方便以后换色）。 */
  --gold:     var(--gold-500);
  --blush:    var(--blush-500);
  --sage-400: color-mix(in srgb, var(--sage-500) 65%, var(--sage-300));

  --ok:       #48855a;
  --warn:     #a9762c;
  --danger:   #b8503f;

  /* ── 形状 ─────────────────────────────────────────── */
  --radius-2xl: 30px;
  --radius-xl:  22px;
  --radius:     16px;
  --radius-sm:  10px;
  --radius-pill: 999px;

  /* ── 阴影：近细远软，两层叠加才有"浮起来"的感觉 ───── */
  --shadow-xs: 0 1px 2px rgba(74, 60, 36, 0.06);
  --shadow-sm: 0 1px 2px rgba(74, 60, 36, 0.05), 0 6px 14px -8px rgba(74, 60, 36, 0.22);
  --shadow:    0 2px 4px rgba(74, 60, 36, 0.05), 0 18px 38px -22px rgba(74, 60, 36, 0.35);
  --shadow-lg: 0 2px 6px rgba(74, 60, 36, 0.05), 0 36px 70px -38px rgba(74, 60, 36, 0.45);
  --shadow-glow: 0 24px 60px -30px rgba(85, 122, 61, 0.55);

  /* ── 字体 ─────────────────────────────────────────── */
  --font-display: "Fraunces", "Noto Serif SC", "Source Han Serif SC", "Songti SC",
                  STSong, "SimSun", serif;
  --font-serif:   "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --font-sans:    "HarmonyOS Sans SC", "PingFang SC", "Noto Sans SC",
                  "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ── 动效 ─────────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:       200ms;
  --dur-slow:  620ms;

  color-scheme: light;
}

/* 深色：深夜森林。不是灰，是"关了灯的房间"。 */
:root[data-theme="dark"] {
  --cream-50:  #14180f;
  --cream-100: #11150d;
  --cream-200: #1a2014;
  --cream-300: #222a1a;

  --bg:        #11150d;
  --bg-deep:   #0b0e08;
  --panel:     #191f13;
  --panel-2:   #1e2517;
  --panel-3:   #242d1c;
  --border:    #303a26;
  --border-soft: #27301f;

  --ink-900:   #f0ebdd;
  --ink-700:   #c3c9b4;
  --ink-500:   #8f977f;
  --text:      var(--ink-900);
  --text-dim:  var(--ink-700);
  --text-mute: var(--ink-500);

  --sage-700:  #cfe3b4;
  --sage-600:  #b3ce93;
  --sage-500:  #9bbd7b;
  --sage-300:  #4d6238;
  --sage-100:  #232d19;

  --gold-600:  #e6c17a;
  --gold-500:  #d9b16a;
  --gold-300:  #6b5527;
  --gold-100:  #2b2414;

  --blush-500: #d99a91;
  --blush-100: #2d1f1b;

  --accent:      var(--sage-600);
  --accent-deep: var(--sage-500);
  --accent-ink:  #16200f;
  --accent-soft: var(--sage-100);
  --accent-line: var(--sage-300);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  --shadow:    0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 38px -22px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.45), 0 36px 70px -38px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 24px 60px -30px rgba(155, 189, 123, 0.35);

  color-scheme: dark;
}