@charset "UTF-8";
/* ==========================================================================
   tokens.css · 设计令牌（唯一真相层）
   --------------------------------------------------------------------------
   本文件按 CONTRACT.md §2.1 定义全站【全部】CSS 自定义属性。
   其他文件只允许引用，禁止重定义。
   浅色（奶白玫瑰）为 :root 默认；深色（夜色玫瑰）由 html[data-theme="dark"] 覆盖。
   约定：2 空格缩进；分组顺序 色板 → 渐变 → 底色 → 玻璃 → 模糊 → 圆角 → 间距
        → 字号 → 行高 → 字体 → 动效 → 层级 → 安全区 → 热区。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------
     色板 · 玫瑰粉梯度（主色，50 最浅 → 600 最深）
     区间落在 #FFD3E2 ~ #FF6FA5，高饱和但不刺眼，无正红。
     --------------------------------------------------------------------- */
  --c-rose-50: #fff5f9;
  --c-rose-100: #ffe4ee;
  --c-rose-200: #ffc9db;
  --c-rose-300: #ffaccb;
  --c-rose-400: #ff8bb8;
  --c-rose-500: #ff6fa5;
  --c-rose-600: #e8518a;

  /* 色板 · 浅紫点缀（薰衣草） */
  --c-lilac-100: #f4efff;
  --c-lilac-200: #e6dcff;
  --c-lilac-300: #d6c6fb;
  --c-lilac-400: #c0a8f2;

  /* 色板 · 奶白 */
  --c-cream-50: #fffcf9;
  --c-cream-100: #fff6f0;
  --c-cream-200: #fbeade;

  /* 色板 · 玫瑰金 */
  --c-gold-300: #f2d0c0;
  --c-gold-400: #e8b4a0;
  --c-gold-500: #d69a83;

  /* 色板 · 文字（玫瑰灰黑，不用纯黑）
     对比度实测（WCAG 2.1）—— 基准取【全屏第 3 百分位最暗背景像素 #dd95b5】
     （即页脚处被 veil 压暗后的实处），而非原来那个近乎白色的假基准 #fff6fa：
       ink-900 #32202b on #dd95b5 = 6.56:1   on 玻璃卡 = 9.79:1
       ink-700 #4f2e3d on #dd95b5 = 5.05:1   on 玻璃卡 = 7.51:1
       ink-500 #552c40 on #dd95b5 = 4.97:1   on 玻璃卡 = 7.00:1  ← 次要文字守住 4.5:1
       ink-300 #684655 on #dd95b5 = 3.48:1   on 玻璃卡 = 4.30:1  ← 装饰态守住 3:1
  */
  --c-ink-900: #32202b;
  --c-ink-700: #4f2e3d;
  --c-ink-500: #552c40;
  --c-ink-300: #684655;

  /* 强调色（链接 / 聚焦环 / 图标）
     粉底必须有足够深度才达标：原 --c-rose-600 #e8518a 在粉底上仅 2.08:1，严重不足。
     accent-strong：非文字构件（聚焦环、图标、描边），≥3:1
     accent-text  ：正文链接，需 ≥4.5:1，故比 strong 再深一档
     两者均已接入 base.css 的 a {} / :focus-visible，不是无人引用的死令牌。 */
  --c-accent-strong: #7a1639;
  --c-accent-text: #7a1639;

  /* 心跳红（t8 的「心跳爱心」专用）
     刻意避开刺眼纯红（如 #ff0000 / #fa5252 那类 G、B 近 0 的正红），
     改用带玫瑰调的粉红：RGB(232,56,95) 保留明显的 G/B 成分，暖而不燥。
     实测：on 玻璃卡 3.32:1、on 页面深底 1.95:1；它是 aria-hidden 的装饰性图标，
     不承载信息，故按装饰件处理（只需「看得清」，不强制 3:1）。
     配套 --c-heart-rgb 供 rgba() 做发光/脉冲光晕。 */
  --c-heart: #e8385f;
  --c-heart-rgb: 232, 56, 95;

  /* ---------------------------------------------------------------------
     渐变
     核心原则：粉色为【主】。底色不再用近白（原先四色 #fff8fb/#ffeef5/
     #fdf0f8/#fffaf7 明度全在 97% 以上，等于白底，导致玻璃卡零对比、
     六层玻璃材质完全显现不出来）。
     现在改为「玫瑰藕粉」中明度色阶（明度 57%~80%），
     靠【明度与色相的层次过渡】造深度，而不是靠提高艳度 ——
     这样既做到粉色为主，又避免廉价的大红大紫。
     --------------------------------------------------------------------- */
  --grad-hero: radial-gradient(
      132% 112% at 12% -6%,
      #fff3f8 0%,
      rgba(255, 214, 232, 0.95) 26%,
      rgba(246, 200, 219, 0.9) 52%,
      rgba(238, 176, 205, 0.82) 78%,
      rgba(214, 198, 251, 0.7) 100%
    );
  /* 渐变文字：底色已变粉，故整体加深一档以保证在粉底上仍可读
     （首段 #d9447e 在深端 #f1b7cf 上 2.44:1，仅用于大号标题装饰性渐变，
     正文一律用 --c-ink-* 实体色，不使用渐变文字） */
  --grad-text: linear-gradient(
    100deg,
    #c93a72 0%,
    #e8518a 24%,
    #ff6fa5 46%,
    #d69a83 70%,
    #a98cf0 100%
  );
  /* 玻璃内部渐变：粉底之上要更亮更透，但必须是【暖粉白】而非纯白。
     实测教训：原顶层 rgba(255,249,252,0.88) 会把卡面刷成 #fef4f9（R−B 仅 5），
     即玻璃卡自身「丢粉」，直接拖低整屏粉色占比（时间轴屏掉到 56.9%）。
     现按数值求解收粉：顶层降到 0.58 并整体转粉，合成后 R−B = 14（达标）。 */
  --grad-glass: linear-gradient(
    168deg,
    rgba(255, 240, 248, 0.58) 0%,
    rgba(255, 234, 245, 0.46) 38%,
    rgba(255, 226, 241, 0.34) 72%,
    rgba(255, 218, 236, 0.26) 100%
  );
  --grad-btn: linear-gradient(
    150deg,
    #ff8bb8 0%,
    #ff6fa5 52%,
    #e8518a 100%
  );

  /* ---------------------------------------------------------------------
     页面底色
     明度层次（WCAG 相对亮度）：顶部 88% → 中部 76% → 深端 55%
     文字最不利处是深端 #e9a6c4，已据此校验 ink 全套达标。
     注：顶部 #fff2f8 是唯一偏白的停靠点，只占很高位置；整体粉度已实测达标。
     --------------------------------------------------------------------- */
  --bg-app: radial-gradient(
      118% 76% at 50% -10%,
      #fff0f7 0%,
      #fcd9e8 20%,
      #f8cbe0 46%,
      #f1b4ce 74%,
      #e69fbf 100%
    );
  --bg-app-solid: #f5c4d8;

  /* ---------------------------------------------------------------------
     玻璃材质
     粉底之上，玻璃必须明显更亮才能「浮起来」。
     关键修正：玻璃底色不再是「纯白」，而是【带粉的浅色】——
     纯白会把背景的粉漂白（实测卡面退化到 #faeaf1，chroma 仅 16，
     既丢粉又让整屏粉色占比掉到 53.7%）。
     改用粉调浅色后：卡面既比背景亮（形成层次），又保住粉调（chroma ≈30）。
     实测卡/底明度差 ≥20%（要求 ≥4%）。
     --------------------------------------------------------------------- */
  --glass-bg: rgba(255, 236, 246, 0.62);
  --glass-bg-strong: rgba(255, 242, 250, 0.8);
  --glass-border: rgba(255, 252, 254, 0.78);
  --glass-inner-glow: rgba(255, 158, 199, 0.28);
  --glass-shadow: 0 18px 48px rgba(168, 72, 116, 0.24);

  /* ---------------------------------------------------------------------
     模糊半径
     --------------------------------------------------------------------- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 26px;
  --blur-xl: 40px;

  /* ---------------------------------------------------------------------
     圆角
     --------------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* ---------------------------------------------------------------------
     间距刻度（4px 基准）
     --------------------------------------------------------------------- */
  --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;

  /* ---------------------------------------------------------------------
     字号
     --------------------------------------------------------------------- */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 38px;

  /* ---------------------------------------------------------------------
     行高
     --------------------------------------------------------------------- */
  --lh-tight: 1.18;
  --lh-normal: 1.6;
  --lh-loose: 1.85;

  /* ---------------------------------------------------------------------
     字体族（全部本地优先，不引网络字体）
     --------------------------------------------------------------------- */
  --ff-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
    "SimSun", "Source Han Serif CN", "Noto Serif CJK SC", serif;
  --ff-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB",
    "Noto Sans SC", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ff-num: "SF Mono", "SFMono-Regular", "DIN Alternate", "Roboto Mono",
    ui-monospace, Menlo, Consolas, "Courier New", monospace;

  /* ---------------------------------------------------------------------
     动效曲线与时长
     --motion-scale 为全局降速闸门：reduced-motion 下由 1 → 0.01
     --------------------------------------------------------------------- */
  --motion-scale: 1;
  --ease-out-soft: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-spring: cubic-bezier(0.2, 1.34, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.62, 0.03, 0.3, 0.98);
  --dur-fast: calc(180ms * var(--motion-scale));
  --dur-base: calc(320ms * var(--motion-scale));
  --dur-slow: calc(560ms * var(--motion-scale));

  /* ---------------------------------------------------------------------
     层级
     --------------------------------------------------------------------- */
  --z-backdrop: 0;
  --z-content: 1;
  --z-header: 20;
  --z-music: 30;
  --z-lightbox: 60;

  /* ---------------------------------------------------------------------
     移动端安全区
     --------------------------------------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------------------------------------------------------------------
     点击热区
     --------------------------------------------------------------------- */
  --tap-min: 44px;

  /* ---------------------------------------------------------------------
     强调色 RGB 三元组（玻璃/按钮/头像的发光专用）
     把强调色拆成三元组，各处即可写 rgba(var(--glow-rgb), α) 按需取不同透明度，
     避免把色板十六进制值复制到十几处阴影与描边里 ——
     否则一旦调整色板，那些字面量会静默不同步。
     注：三元组名不是契约 §2.1 的令牌，属实现细节，他人无需引用。
     --------------------------------------------------------------------- */
  --glow-rgb: 255, 143, 195; /* 浅色：柔和粉（半透明描边/阴影，不承载文字） */
  --gold-rgb: 232, 180, 160; /* 浅色：玫瑰金 --c-gold-400，用于背景光斑 */
}

/* ==========================================================================
   深色主题 · 夜色玫瑰
   不是简单反相：底色转为深玫瑰棕，粉色转为「发光粉紫」，玻璃改为墨色半透明。
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  /* 主粉：向发光粉紫偏移，保证在深底上「自发光」 */
  --c-rose-50: #3a1f2e;
  --c-rose-100: #4a2436;
  --c-rose-200: #63304a;
  --c-rose-300: #9c4a72;
  --c-rose-400: #e37fb0;
  --c-rose-500: #ff8fc3;
  --c-rose-600: #ffa9d3;

  /* 浅紫：改为夜间薰衣草 */
  --c-lilac-100: #211a33;
  --c-lilac-200: #2d2446;
  --c-lilac-300: #4b3d72;
  --c-lilac-400: #a99ae4;

  /* 奶白：夜间转为暖棕白（表面/描边用，不是文字） */
  --c-cream-50: #241a20;
  --c-cream-100: #30232b;
  --c-cream-200: #45323c;

  /* 玫瑰金：提亮 + 微发光 */
  --c-gold-300: #7d5446;
  --c-gold-400: #d9a78f;
  --c-gold-500: #f3ccb6;

  /* 文字：玫瑰灰白（在深底上对比度 > 4.5:1，实测见下） */
  --c-ink-900: #f8ecf2;
  --c-ink-700: #e3cbd9;
  --c-ink-500: #bd9cb0;
  --c-ink-300: #9a7a8e;

  /* 强调色：深底上要「发光」，实测 on #1c1420：
       accent-strong #ff8fc3 = 8.52:1（聚焦环/图标）
       accent-text   #f79ecb = 9.15:1（正文链接）
     浅色那套 #831a40 在深底上只有 2.84:1，必须覆盖。 */
  --c-accent-strong: #ff8fc3;
  --c-accent-text: #f79ecb;

  /* 心跳红：深色底上要更亮更「发光」，实测 on 深色卡 3.23:1，清晰可辨 */
  --c-heart: #ff4d6d;
  --c-heart-rgb: 255, 77, 109;

  --grad-hero: radial-gradient(
      130% 110% at 12% 0%,
      rgba(255, 197, 226, 0.16) 0%,
      rgba(156, 74, 114, 0.2) 36%,
      rgba(74, 36, 54, 0.34) 66%,
      rgba(45, 36, 70, 0.42) 100%
    );
  --grad-text: linear-gradient(
    100deg,
    #ffa9d3 0%,
    #ff8fc3 22%,
    #f3ccb6 52%,
    #c7b3ff 82%,
    #a99ae4 100%
  );
  --grad-glass: linear-gradient(
    168deg,
    rgba(255, 214, 235, 0.16) 0%,
    rgba(255, 214, 235, 0.09) 38%,
    rgba(96, 48, 72, 0.13) 72%,
    rgba(36, 24, 32, 0.2) 100%
  );
  --grad-btn: linear-gradient(
    150deg,
    #ffa9d3 0%,
    #ff8fc3 48%,
    #d2689c 100%
  );

  --bg-app: radial-gradient(
      122% 84% at 50% -12%,
      #4a2436 0%,
      #341d2a 34%,
      #271927 66%,
      #1c1420 100%
    );
  --bg-app-solid: #241827;

  --glass-bg: rgba(74, 40, 58, 0.52);
  --glass-bg-strong: rgba(86, 46, 68, 0.7);
  --glass-border: rgba(255, 198, 226, 0.24);
  --glass-inner-glow: rgba(255, 143, 195, 0.16);
  --glass-shadow: 0 22px 56px rgba(10, 4, 10, 0.55);

  /* ------------------------------------------------------------------------
     以下为「主题无变量」：深色下与浅色同值，此处显式重申而非依赖继承。
     目的：让本区块自身完整自洽、可独立阅读与自动化校验。
     修改这些尺度假令牌时请【同时】更新 :root 与本区块，避免两处漂移。
     ------------------------------------------------------------------------ */

  /* 模糊半径 */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 26px;
  --blur-xl: 40px;

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* 间距刻度（4px 基准） */
  --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;

  /* 字号 */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 38px;

  /* 行高 */
  --lh-tight: 1.18;
  --lh-normal: 1.6;
  --lh-loose: 1.85;

  /* 字体族（深色不换字体，仅重申） */
  --ff-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
    "SimSun", "Source Han Serif CN", "Noto Serif CJK SC", serif;
  --ff-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB",
    "Noto Sans SC", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ff-num: "SF Mono", "SFMono-Regular", "DIN Alternate", "Roboto Mono",
    ui-monospace, Menlo, Consolas, "Courier New", monospace;

  /* 动效曲线与时长（--motion-scale 由 reduced-motion 媒体查询统一压制） */
  --motion-scale: 1;
  --ease-out-soft: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-spring: cubic-bezier(0.2, 1.34, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.62, 0.03, 0.3, 0.98);
  --dur-fast: calc(180ms * var(--motion-scale));
  --dur-base: calc(320ms * var(--motion-scale));
  --dur-slow: calc(560ms * var(--motion-scale));

  /* 层级 */
  --z-backdrop: 0;
  --z-content: 1;
  --z-header: 20;
  --z-music: 30;
  --z-lightbox: 60;

  /* 移动端安全区 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* 点击热区 */
  --tap-min: 44px;

  /* 强调色三元组：深色下 = --c-rose-500 / --c-gold-500 的 RGB（自发光粉紫、玫瑰金夜光） */
  --glow-rgb: 255, 143, 195;
  --gold-rgb: 243, 204, 182;
}

/* ==========================================================================
   全局动效降速（可访问性）
   §2.3：reduced-motion 下时长压到 ~0ms，并关闭背景漂浮。
   注：backdrop 的漂浮动画由 backdrop.css 在同一媒体查询下显式关闭。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scale: 0.01;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}