/* ============================================================
   心岛 v1.0 · 美学地基 tokens.css
   ------------------------------------------------------------
   这是全项目唯一允许出现字面 hex 值的文件。
   其它任何 .css 里出现 #xxxxxx 都算违规，用下面的 var() 代替。

   验收命令（应只命中本文件）：
     grep -rn "#[0-9a-fA-F]\{6\}" frontend-v1/src/styles/

   核心美学公理：
     画面里没有"自己会发光的东西"，只有"被光照到的表面"。
     暗不是空，暗是"海还没有映到的地方"。
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- 心岛 5 色 · 光学语义 ----------
     每个色只干一件事，越界即违规。 */

  --ink:    #3F4E5A;   /* 暮色青墨 · 光照不到的 · 底色/阴影/纸上的墨 */
  --light:  #D4A574;   /* 落日蜜糖 · 光本身 · 且只用于可交互物 */
  --paper:  #F7F1E3;   /* 纸白     · 被光完全照到的纸 */
  --air:    #A8B5BC;   /* 晨雾青灰 · 光与暗之间的空气 */
  --living: #7A8A6B;   /* 苔藓褐绿 · 照不到但活着的 */

  /* ---------- 派生 ----------
     只允许由上面 5 色压暗/加 alpha 得到，不引入新色相。
     写成静态值而非 color-mix()，避开旧版浏览器兼容问题。 */

  --ink-deep:    #26303A;                 /* --ink 压暗 40%（纯黑禁用） */
  --ink-deeper:  #1A2028;                 /* 剪影最暗处 */
  --light-rim:   #9C8468;                 /* --light 与 --ink 对半调出来的暖灰。
                                             逆光剪影顶端被窗光描过的那一道边（屏 5 苍鹭）。
                                             它是"被光擦到的边缘"，不是光源，所以比 --light 暗一档。 */
  --light-core:  rgba(212, 165, 116, .92);
  --light-halo:  rgba(212, 165, 116, .42);
  --light-faint: rgba(212, 165, 116, .16);
  --paper-dim:   rgba(247, 241, 227, .72);
  --paper-ghost: rgba(247, 241, 227, .10);
  --air-veil:    rgba(168, 181, 188, .16);
  --air-dim:     rgba(168, 181, 188, .55);
  --ink-shadow:  rgba(38, 48, 58, .55);
  --vignette:    rgba(38, 48, 58, .86);

  /* ---------- 字体 ----------
     ZCOOL KuaiLe 关在笼子里：只允许出现在应用标题与屏标题，共 7 处。
     强制大字距 + 低对比，把它的"可爱"压成"古旧招牌"。 */

  --font-display: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:    "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-mono:    "IM Fell English", "Georgia", serif;

  /* ---------- 字阶 ---------- */

  --fs-app-title:  72px;   --ls-app-title:  .30em;
  --fs-screen:     40px;   --ls-screen:     .22em;
  --fs-dialog:     19px;   --lh-dialog:    1.90;
  --fs-bubble:     18px;   --lh-bubble:    1.80;
  --fs-quote:      20px;   --lh-quote:     2.05;   --ls-quote: .10em;
  --fs-note:       18px;   --lh-note:      1.95;
  --fs-imagery:    16px;   --lh-imagery:   1.70;   --ls-imagery: .06em;
  --fs-meta:       15px;   --ls-meta:      .06em;
  --fs-micro:      13px;   --lh-micro:     1.75;

  /* 任何中文正文块的行宽硬上限（≈30 汉字/行） */
  --measure: 620px;

  /* ---------- 时长 · 缓动 ----------
     呼吸律：所有环境循环动画周期 ≥ 6s，永不快于人的呼吸。 */

  --t-instant: 120ms;
  --t-quick:   280ms;   /* hover */
  --t-screen:  620ms;   /* 屏间交叉淡入 */
  --t-lamp:    800ms;   /* 点灯（设计稿指定） */
  --t-page:    700ms;   /* 翻页 */
  --t-flash:   880ms;   /* 过曝转场总长 */
  --t-voyage: 4600ms;   /* 屏 4 航行 */
  --t-breath: 7200ms;   /* 呼吸循环基准 */
  --t-mood:   9000ms;   /* 屏 5 窗外光推移 */

  --e-out:  cubic-bezier(.22, .61, .36, 1);
  --e-lamp: cubic-bezier(.40, 0,   .20, 1);
  --e-page: cubic-bezier(.36, 0,   .24, 1);
  --e-sail: cubic-bezier(.32, 0,   .68, 1);

  /* ---------- 间距 ---------- */

  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;
  --sp-4: 32px;  --sp-5: 48px;  --sp-6: 72px;
  --gutter: clamp(32px, 5vw, 88px);
}

/* ============================================================
   基础
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink-deep);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   通用美学层（每屏复用）
   §1.3 参数 2：三带景深 / 参数 3：暗边律
   ============================================================ */

/* 暗边：画面永远"从暗里看出去"
   v1.0.20 · 调高清晰度：外圈暗色强度 100% → 35%，中央透明区 42% → 65%
   减弱设计稿自带的"四角暗化"强度，让周边不再那么糊。 */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(
    ellipse 78% 78% at 50% 46%,
    transparent 65%,
    rgba(26, 32, 40, .35) 100%
  );
}

/* 三带景深：v1.0.20 · 模糊量从 3px/5px 减弱到 1px/1.5px，范围从 20%/25% 缩到 8%/10%
   用两层带 mask 的模糊叠加，不用 backdrop-filter（性能） */
.dof-top, .dof-bottom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
.dof-top {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 8%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 8%);
}
.dof-bottom {
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 10%);
          mask-image: linear-gradient(to top, #000 0%, transparent 10%);
}

/* 纸张噪点：SVG feTurbulence，data-URI 平铺
   用在所有"纸"上（笔记页、苍鹭气泡） */
.paper-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 屏容器 */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  overflow: hidden;
}
.screen.active {
  display: block;
  animation: screen-in var(--t-screen) var(--e-out) both;
}
@keyframes screen-in { from { opacity: 0 } to { opacity: 1 } }

/* ============================================================
   排版基元
   ============================================================ */

.t-app-title {
  font-family: var(--font-display);
  font-size: var(--fs-app-title);
  letter-spacing: var(--ls-app-title);
  line-height: 1;
  color: var(--air);
  opacity: .82;
}

.t-screen-title {
  font-family: var(--font-display);
  font-size: var(--fs-screen);
  letter-spacing: var(--ls-screen);
  line-height: 1.2;
  color: var(--air);
  opacity: .78;
  font-weight: 400;
}

.t-note {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  letter-spacing: .01em;
  max-width: var(--measure);
}

.t-quote {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-quote);
  color: var(--paper-dim);
  max-width: var(--measure);
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  line-height: 1.4;
  color: var(--air);
  opacity: .7;
}

.t-micro {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--air);
}

/* ============================================================
   可交互物 · 蜜糖唯一律
   凡是发暖光的都能点，凡是不发暖光的都点不动。
   全项目不需要按钮、不需要图标、不需要"点击这里"。
   ============================================================ */

[data-hot] {
  cursor: pointer;
  transition: filter var(--t-quick) var(--e-out),
              opacity var(--t-quick) var(--e-out);
}
[data-hot]:hover,
[data-hot]:focus-visible {
  filter: drop-shadow(0 0 14px var(--light-halo));
}

/* 质量地板：键盘焦点必须可见 */
:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 3px;
}

/* ============================================================
   质量地板：尊重 reduced motion
   把所有动画压到瞬时，但不移除任何最终状态
   ============================================================ */

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