/* ==========================================================================
   墨竹印象 · 设计令牌

   「墨竹」是地名——墨竹工卡县，拉萨河上游，米拉山北麓。
   所以整套视觉取自高原本身：靛蓝的天、拉萨河的水色、朱砂的藏印、藏纸的白。
   结构取自长卷：引首（品牌与导航）— 画心（内容）— 底轴（播放条）。

   两条用色规则：
   河水青只用于"正在发生"的事；朱砂只用于印章与最珍贵的一档音质。
   ========================================================================== */

:root {
  /* ---- 墨：由夜靛到淡墨，构成从底到浮层的五级 ---- */
  --ink-0: #04070f;
  --ink-1: #060c1b;
  --ink-2: #0a1428;
  --ink-3: #0c1b2e;
  --ink-4: #12283f;

  /* ---- 纸：藏纸的白，正文与次级文字 ---- */
  --paper: #f2f5f8;
  --paper-dim: #c9d3db;
  --paper-faint: #93a0ad;
  --paper-ghost: #7d8a9b;   /* 原 #5f6c7a 对底色只有 3.4:1（低于正文线 4.5）——
                             用户报"字体看不到全面"的就是这一档：顶栏读数、歌词栏小开关、未唱到的歌词句。
                             提到 #7d8a9b（5.19:1），仍是最安静的一档，但能读清了。 */

  /* ---- 河水青：拉萨河的水色，用于激活态与次级强调 ---- */
  --river: #39d3c4;
  --river-deep: #1e7e78;
  --river-soft: #2aaeb4;
  --river-glow: rgba(57, 211, 196, 0.18);

  /* ---- 朱砂：藏印的红，用于印章、主操作、最珍贵的一档 ---- */
  --seal: #be3227;
  --seal-bright: #d8483a;
  --seal-deep: #8e2419;
  --seal-glow: rgba(190, 50, 39, 0.24);

  /* ---- 银：官网的金属展示字 ---- */
  --silver: #e4ebf0;
  --silver-dim: #a3aeba;

  /* ---- 鎏金：只用于寺院的屋顶，别处一律不用 ---- */
  --gold: #c8a253;
  --gold-bright: #e8c87e;
  --maroon: #8e2419;

  /* ---- 线：纸面上的极淡骨线 ---- */
  --line: rgba(226, 236, 242, 0.09);
  --line-strong: rgba(226, 236, 242, 0.16);
  --line-seal: rgba(190, 50, 39, 0.34);
  --line-bamboo: rgba(57, 211, 196, 0.3);

  /* ---- 极简玻璃：用于浮层 ---- */
  --glass: rgba(6, 12, 27, 0.86);
  --glass-soft: rgba(6, 12, 27, 0.62);
  --blur: saturate(140%) blur(18px);

  /* ---- 字体 ---- */
  /* 藏文必须显式指定：系统里常并存多套「旧式藏文字体」（TibetanUnicode / TibetanMachine 等），
     它们没有 OpenType 定位，元音与下加字会散成独立字形并出现虚线圆圈。
     下面这几个才是支持 Unicode 藏文正确连写的：Kailasa(macOS) / Noto(Android·Linux) /
     Jomolhari / Microsoft Himalaya(Windows)。放在栈尾，只在遇到藏文码位时才生效。 */
  /* 顺序很关键：Kailasa 是 macOS 自带且字形正确；后面几个是其他平台的替代 */
  --font-tibetan: "Kailasa", "Noto Serif Tibetan", "Noto Sans Tibetan", "Jomolhari", "Microsoft Himalaya", "DDC Uchen", sans-serif;
  --font-cn-display: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", var(--font-tibetan), serif;
  --font-cn-ui: "Noto Sans CJK SC", -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, var(--font-tibetan), sans-serif;
  --font-latin-display: Didot, "Bodoni 72", "Playfair Display", "Times New Roman", var(--font-cn-display);
  --font-mono: "SF Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, var(--font-tibetan), monospace;
  /* 发丝几何：参考图的骨架。苹方有 Ultralight/Thin，Helvetica Neue 有 100/200，
     不需要下载字体——但只在大字上使用，小字发丝等于看不见。 */
  --font-thin: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Noto Sans", system-ui, sans-serif;
  --w-hairline: 100;
  --w-thin: 200;
  --track-display: 0.14em;

  /* ---- 字号阶梯（1.25 比例，含中文可用下限） ----
     2026-10-10 整档抬起（用户："整体放大……视觉更饱满、层次更丰富"）。
     实测依据：2560×1317 视口下 micro 11 / tiny 12 是屏上最小的字，
     歌词正文只有 14px、时间码 12px —— 截图放大看都要凑近。
     这次把下限抬到 13px，上面每一档各 +1~2px，阶梯比例仍保持 1.2~1.25，
     层次没有被摊平（大标题与正文的比值反而略升）。 */
  --fs-micro: 13px;
  --fs-tiny: 13.5px;
  --fs-small: 15px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-title: 23px;
  --fs-h3: 28px;
  --fs-h2: 34px;
  --fs-h1: 46px;
  --fs-hero: clamp(42px, 5.4vw, 76px);
  /* 唱片页大标题用的那一档。原先它写在页面里（clamp(32px,3.5vw,52px)），
     于是 40 与 52 之间在系统里空着 —— 补成令牌，页面引用它。 */
  /* 用户："可以小点，要不扰排版有问题" —— 60px 遇到长英文标题会折成六行、把信息区推满屏。
     收到 46：短标题仍是页面最大的字，长标题的折行数也回到可接受范围。
     （要"随字数自适应大小"需要 JS 量文案长度，不是纯 CSS 能做的 —— 那是另一个决定。）
     2026-10-10：随整档抬起，46 → 54，并把 vw 系数 3.2 提到 3.4（长标题在中等屏上
     仍会先被 vw 那一项收住，不会直接顶到 54）。 */
  --fs-display: clamp(34px, 3.4vw, 54px);

  /* ---- 间距 ----
     2026-10-10：随字号一起放大一档。字号抬了而间距不动，字会"挤在原来的盒子里"，
     读起来反而更闷；这四档是列表行高、卡片内距、分节留白的主要来源。 */
  --sp-1: 5px;
  --sp-2: 9px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 27px;
  --sp-6: 36px;
  --sp-7: 54px;
  --sp-8: 80px;

  /* ---- 结构尺寸 ---- */
  --rail-w: 256px;
  --dock-h: 94px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-xl: 22px;

  /* ---- 动效 ---- */
  --ease-ink: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-mid: 280ms;
  --dur-slow: 620ms;

  /* ---- 阴影：只用墨色，不用灰 ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, 0.72);
  --shadow-3: 0 32px 80px -24px rgba(0, 0, 0, 0.8);

  --z-dock: 40;
  --z-queue: 50;
  --z-stage: 60;
  --z-menu: 70;
  --z-toast: 80;
}

/* 朱砂印章式焦点环：可见、统一、不刺眼 */
:focus-visible {
  outline: 2px solid var(--seal-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-mid: 1ms;
    --dur-slow: 1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}