/* =========================================================
   TIDE LETTERS · 设计令牌
   —— 只在这里定义颜色/字号/间距/动效；页面只用变量
   ========================================================= */

:root {
  /* ---------- 字体 ---------- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia,
                  "Songti SC", "Source Han Serif SC", serif;
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC",
                "STSong", "SimSun", serif;
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;

  /* ---------- 字号（流体） ---------- */
  --fs-display: clamp(44px, 8.4vw, 116px);
  --fs-h1: clamp(31px, 4.3vw, 54px);
  --fs-h2: clamp(23px, 2.7vw, 36px);
  --fs-h3: clamp(17px, 1.6vw, 22px);
  --fs-h4: clamp(15px, 1.2vw, 18px);
  --fs-body: clamp(15px, 1.05vw, 16.5px);
  --fs-sm: 13.5px;
  --fs-xs: 11.5px;

  --lh-tight: 1.15;
  --lh-body: 1.78;
  --lh-poem: 2.12;

  --tracking-xl: .34em;
  --tracking-lg: .18em;
  --tracking-sm: .06em;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;
  --sp-13: 120px; --sp-14: 160px;

  /* ---------- 圆角 ---------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px;

  /* ---------- 版式 ---------- */
  --w-container: 1180px;
  --w-narrow: 740px;
  --w-wide: 1440px;
  --nav-h: 68px;
  --pad-x: clamp(20px, 4vw, 48px);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-mic: 200ms;
  --dur-mid: 420ms;
  --dur-in: 780ms;

  /* ---------- 层级 ---------- */
  --z-ambient: 0;
  --z-grain: 1;
  --z-content: 2;
  --z-nav: 50;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 90;
  --z-cursor: 100;

  /* ---------- 语义色（由模式覆盖） ---------- */
  --danger: #a4443c;
  --ok: #3f7d5f;
  --warn: #a8763f;
  --info: #2c6e8f;
}

/* =========================================================
   模式一 · 月白纸（默认）
   ========================================================= */
:root,
:root[data-mode="paper"] {
  color-scheme: light;
  --bg: #f3eee4;
  --bg-2: #eae2d3;
  --bg-deep: #ded3bf;
  --surface: rgba(255, 252, 244, .62);
  --surface-2: rgba(255, 252, 244, .86);
  --surface-solid: #fbf7ee;
  --ink: #17222f;
  --ink-2: #465467;
  --ink-3: #7d8897;
  --line: rgba(23, 34, 47, .13);
  --line-2: rgba(23, 34, 47, .26);
  --accent: #2b6c8c;
  --accent-2: #a3713c;
  --accent-ink: #fbf7ee;
  --accent-soft: rgba(43, 108, 140, .10);
  --glow: rgba(255, 250, 235, .55);
  --shadow-sm: 0 1px 2px rgba(23, 34, 47, .05), 0 10px 30px -18px rgba(23, 34, 47, .25);
  --shadow-md: 0 18px 60px -28px rgba(23, 34, 47, .38);
  --shadow-lg: 0 40px 120px -50px rgba(23, 34, 47, .5);
  --grain-opacity: .035;
  --vignette: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(90, 74, 50, .10) 100%);
}

/* =========================================================
   模式二 · 深海夜
   ========================================================= */
:root[data-mode="night"] {
  color-scheme: dark;
  --bg: #060b12;
  --bg-2: #0a1420;
  --bg-deep: #0e1c2b;
  --surface: rgba(14, 26, 40, .58);
  --surface-2: rgba(17, 31, 47, .84);
  --surface-solid: #0d1a28;
  --ink: #e9eef4;
  --ink-2: #a8b8c9;
  --ink-3: #6f8298;
  --line: rgba(233, 238, 244, .12);
  --line-2: rgba(233, 238, 244, .26);
  --accent: #7cbbd2;
  --accent-2: #d3ad74;
  --accent-ink: #04121c;
  --accent-soft: rgba(124, 187, 210, .12);
  --glow: rgba(120, 180, 210, .22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -18px rgba(0, 0, 0, .7);
  --shadow-md: 0 24px 70px -30px rgba(0, 0, 0, .8);
  --shadow-lg: 0 50px 140px -60px rgba(0, 0, 0, .9);
  --grain-opacity: .05;
  --vignette: radial-gradient(120% 90% at 50% 0%, transparent 35%, rgba(0, 0, 0, .55) 100%);
}

/* =========================================================
   氛围强调色（五种 mood × 两种模式）
   ========================================================= */
:root[data-mode="paper"][data-mood="dawn"]  { --accent: #a95c6b; --accent-2: #b0834a; --glow: rgba(255, 226, 214, .6); }
:root[data-mode="paper"][data-mood="day"]   { --accent: #2b6c8c; --accent-2: #a3713c; --glow: rgba(226, 244, 252, .6); }
:root[data-mode="paper"][data-mood="dusk"]  { --accent: #8a5b76; --accent-2: #b67a45; --glow: rgba(255, 210, 196, .5); }
:root[data-mode="paper"][data-mood="night"] { --accent: #3f5e86; --accent-2: #a98650; --glow: rgba(196, 214, 240, .45); }
:root[data-mode="paper"][data-mood="sakura"]{ --accent: #b05a78; --accent-2: #bd8a52; --glow: rgba(255, 226, 235, .65); }

:root[data-mode="night"][data-mood="dawn"]  { --accent: #e2a3ac; --accent-2: #d8b27c; --glow: rgba(226, 160, 172, .22); }
:root[data-mode="night"][data-mood="day"]   { --accent: #7cbbd2; --accent-2: #d3ad74; --glow: rgba(120, 180, 210, .22); }
:root[data-mode="night"][data-mood="dusk"]  { --accent: #d49ab6; --accent-2: #e0aa70; --glow: rgba(212, 154, 182, .2); }
:root[data-mode="night"][data-mood="night"] { --accent: #9db8dd; --accent-2: #d3ad74; --glow: rgba(150, 180, 230, .22); }
:root[data-mode="night"][data-mood="sakura"]{ --accent: #e9a7c0; --accent-2: #d8b27c; --glow: rgba(233, 167, 192, .22); }

/* =========================================================
   阅读设置（诗页可调，作用在 .reader 上）
   ========================================================= */
:root {
  --reading-font: var(--font-serif);
  --reading-scale: 1;
  --reading-lh: var(--lh-poem);
  --reading-track: .045em;
}
