/* 墨之家 tokens — carved out of index.html (P2b, 2026-07-13).
   全站唯一的色彩、字族與墨的四個行為。改這裡＝改整個家。
   Deploy lockstep: web.ts STATIC_FILES · server.ts sourceFileSpecs
   · deploy_channel.py FILES · sw.js SHELL (cache bump on change). */

/* ————— 墨之家 tokens（2026-07-12 立法）—————
   宣紙帶青灰（不是奶油白）、墨沉在藍裡（不是暖棕）。
   雙人色：墨青 Cyan／胭脂絳 Ruby；金只做最小的點。
   墨階 --ink-70/45/25/12 是全站唯一的灰度語言。 */
:root {
  --paper: #F0EDE4;
  --raised: #F7F5EE;
  --line: #DBD7C9;
  --ink: #24262B;
  --ink-soft: #7E7B6F;
  --ink-70: rgba(36, 38, 43, 0.72);
  --ink-45: rgba(36, 38, 43, 0.45);
  --ink-25: rgba(36, 38, 43, 0.25);
  --ink-12: rgba(36, 38, 43, 0.12);
  --cyan: #3F6E78;
  --cyan-deep: #2F5760;
  --cyan-soft: rgba(63, 110, 120, 0.16);
  --ruby: #A34A52;
  --ruby-paper: #EFE4DD;
  --ruby-soft: rgba(163, 74, 82, 0.15);
  --gold: #AD8B4A;
  --serif: "Songti TC", "Noto Serif TC", "Hiragino Mincho ProN", "Songti SC", serif;
  --shadow: 0 6px 24px rgba(36, 38, 43, 0.10), 0 1px 3px rgba(36, 38, 43, 0.06);
  --noise-opacity: 0.035;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161B;
    --raised: #1B1E25;
    --line: #30343D;
    --ink: #E6E1D5;
    --ink-soft: #8F8D82;
    --ink-70: rgba(230, 225, 213, 0.74);
    --ink-45: rgba(230, 225, 213, 0.48);
    --ink-25: rgba(230, 225, 213, 0.26);
    --ink-12: rgba(230, 225, 213, 0.12);
    --cyan: #7FB0B8;
    --cyan-deep: #93C2CA;
    --cyan-soft: rgba(127, 176, 184, 0.14);
    --ruby: #CE7A80;
    --ruby-paper: #2A2530;
    --ruby-soft: rgba(206, 122, 128, 0.14);
    --gold: #C6A25E;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --noise-opacity: 0.05;
  }
}
/* the moon button forces day or night; without it we follow the phone */
:root[data-theme="dark"] {
  --paper: #14161B;
  --raised: #1B1E25;
  --line: #30343D;
  --ink: #E6E1D5;
  --ink-soft: #8F8D82;
  --ink-70: rgba(230, 225, 213, 0.74);
  --ink-45: rgba(230, 225, 213, 0.48);
  --ink-25: rgba(230, 225, 213, 0.26);
  --ink-12: rgba(230, 225, 213, 0.12);
  --cyan: #7FB0B8;
  --cyan-deep: #93C2CA;
  --cyan-soft: rgba(127, 176, 184, 0.14);
  --ruby: #CE7A80;
  --ruby-paper: #2A2530;
  --ruby-soft: rgba(206, 122, 128, 0.14);
  --gold: #C6A25E;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --noise-opacity: 0.05;
}
:root[data-theme="light"] {
  --paper: #F0EDE4;
  --raised: #F7F5EE;
  --line: #DBD7C9;
  --ink: #24262B;
  --ink-soft: #7E7B6F;
  --ink-70: rgba(36, 38, 43, 0.72);
  --ink-45: rgba(36, 38, 43, 0.45);
  --ink-25: rgba(36, 38, 43, 0.25);
  --ink-12: rgba(36, 38, 43, 0.12);
  --cyan: #3F6E78;
  --cyan-deep: #2F5760;
  --cyan-soft: rgba(63, 110, 120, 0.16);
  --ruby: #A34A52;
  --ruby-paper: #EFE4DD;
  --ruby-soft: rgba(163, 74, 82, 0.15);
  --gold: #AD8B4A;
  --shadow: 0 6px 24px rgba(36, 38, 43, 0.10), 0 1px 3px rgba(36, 38, 43, 0.06);
  --noise-opacity: 0.035;
}

/* ————— 墨的行為（全站唯一的狀態語言）—————
   呼吸＝活水；褪＝遺忘；垂＝執念；牽＝因果。
   各房間逐步遷移到這四個 class，不再各自發明。 */
.ink-breathe { animation: inkBreathe 3.4s ease-in-out infinite; }
@keyframes inkBreathe {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
.ink-fading { opacity: 0.62; }
.ink-sleeping { opacity: 0.38; filter: blur(0.5px); }
.ink-hang { position: relative; }
.ink-hang::before {
  content: ""; position: absolute; top: -1px; width: 1.5px; height: 20px;
  background: linear-gradient(var(--ink-25), var(--ink-70));
}
.ink-hang::after {
  content: ""; position: absolute; top: 17px; width: 7px; height: 9px;
  background: var(--ink-70); border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
  animation: inkQuiver 5s ease-in-out infinite;
}
@keyframes inkQuiver {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.12); }
}
.serif-room { font-family: var(--serif); font-weight: 600; }
.room-side-label {
  writing-mode: vertical-rl; font-family: var(--serif);
  letter-spacing: 0.5em; color: var(--ink-45); user-select: none;
}
/* 房間印章的正確的家（2026-07-13）：頁首右緣，跟標題同層——
   埋在滾動區裡遲早被內容蓋掉半個字 */
.head-side { margin-left: auto; font-size: 15px; letter-spacing: 0.28em; opacity: 0.55; align-self: center; padding-right: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ink-breathe, .ink-hang::after { animation: none; }
}