/* ============================================================
   tokens.css —— Mango 全站设计令牌 v2
   Apple HIG / Liquid Glass 语义色 + 8pt 间距 + 弹簧动效
   变量名与 v1 完全兼容，新增令牌均为增量
   ============================================================ */
:root {
  color-scheme: dark;

  /* —— 品牌色（保留 Mango 识别资产） —— */
  --mango: #ffb800;
  --mango-soft: #ffcf4d;
  --mango-deep: #e09e00;
  --teal: #34d399;
  --teal-soft: #6ee7b7;
  --sky: #38bdf8;
  --violet: #a78bfa;

  /* —— 暗色（默认）语义色 —— */
  --bg-0: #07070b;
  --bg-1: #0c0c12;
  --bg-2: #12121a;
  --bg-3: #181824;
  --bg-glass: rgba(255, 255, 255, 0.045);
  --bg-glass-2: rgba(255, 255, 255, 0.07);
  --bg-glass-strong: rgba(22, 22, 32, 0.78);
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --glass-hi: rgba(255, 255, 255, 0.14);   /* 材质亮顶边：光线打在玻璃上 */

  --text-1: #f4f4f8;
  --text-2: rgba(244, 244, 248, 0.62);
  --text-3: rgba(244, 244, 248, 0.40);
  --text-on-accent: #1a1300;

  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  --focus: #ffcf4d;

  /* —— 程序化极光（无外部素材依赖） —— */
  --aurora-1: rgba(255, 184, 0, 0.20);
  --aurora-2: rgba(52, 211, 153, 0.14);
  --aurora-3: rgba(56, 189, 248, 0.12);
  --grid-line: rgba(255, 255, 255, 0.028);

  /* —— 间距系统（8pt 基准） —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* —— 圆角 —— */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* —— 阴影 / 层级（材质厚度编码层级） —— */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 30px rgba(0,0,0,.45);
  --shadow-3: 0 24px 70px rgba(0,0,0,.55);
  --shadow-4: 0 40px 110px rgba(0,0,0,.62);
  --shadow-5: 0 60px 160px rgba(0,0,0,.7);
  --glow: 0 0 0 1px rgba(255,184,0,.35), 0 12px 40px rgba(255,184,0,.18);
  --glow-teal: 0 0 0 1px rgba(52,211,153,.30), 0 12px 40px rgba(52,211,153,.14);

  /* —— Liquid Glass 材质参数（唯一可调层 · 深色） ——
     所有玻璃组件只引用这里的变量，禁止散落硬编码；明暗主题各一套 */
  --lg-blur: 18px;                              /* 模糊半径 10~20px，>20px 性能陡增 */
  --lg-sat: 175%;                               /* 环境色反射（saturate）强度 */
  --lg-tint: rgba(255, 255, 255, 0.055);        /* 玻璃底色 tint */
  --lg-tint-strong: rgba(18, 18, 28, 0.80);     /* 导航/弹层强 tint，保证文字可读 */
  --lg-hi-top: rgba(255, 255, 255, 0.20);       /* 顶部内高光：光线打在玻璃上沿 */
  --lg-hi-bottom: rgba(0, 0, 0, 0.26);          /* 底部内暗边：材质厚度 */
  --lg-hi-side: rgba(255, 255, 255, 0.055);     /* 侧边环境光反射 */
  --lg-spec: rgba(255, 255, 255, 0.07);         /* 指针/顶部光泽 */
  --lg-stroke: rgba(255, 255, 255, 0.10);       /* 玻璃描边 */
  --lg-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
  --lg-shadow-hi: 0 18px 48px rgba(0, 0, 0, 0.52);
  --lg-radius: var(--r-lg);

  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* —— 动效（默认临界阻尼弹簧，无弹跳） —— */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-press: cubic-bezier(.2, 0, .2, 1);
  --dur-1: .18s; --dur-2: .32s; --dur-3: .5s; --dur-4: .8s;

  /* —— 布局 —— */
  --nav-h: 60px;
  --maxw-prose: 680px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --z-bg: 0; --z-aurora: 0; --z-content: 1; --z-nav: 50;
  --z-tabbar: 55; --z-overlay: 80; --z-drawer: 85; --z-toast: 100;
}

/* —— 浅色主题（同一套语义色，四上下文之一） —— */
:root[data-theme="light"] {
  color-scheme: light;
  --bg-0: #eef0f5;
  --bg-1: #f6f7fb;
  --bg-2: #ffffff;
  --bg-3: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.66);
  --bg-glass-2: rgba(255, 255, 255, 0.84);
  --bg-glass-strong: rgba(255, 255, 255, 0.94);
  --hairline: rgba(10, 10, 30, 0.11);
  --hairline-strong: rgba(10, 10, 30, 0.20);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --text-1: #15151f;
  --text-2: rgba(21, 21, 31, 0.62);
  --text-3: rgba(21, 21, 31, 0.46);
  --focus: #b47c00;
  --aurora-1: rgba(255, 184, 0, 0.16);
  --aurora-2: rgba(52, 211, 153, 0.12);
  --aurora-3: rgba(56, 189, 248, 0.10);
  --grid-line: rgba(10, 10, 30, 0.035);
  --shadow-1: 0 1px 2px rgba(20,20,50,.08);
  --shadow-2: 0 8px 30px rgba(20, 20, 50, .12);
  --shadow-3: 0 24px 70px rgba(20, 20, 50, .18);
  --shadow-4: 0 40px 110px rgba(20, 20, 50, .22);
  --shadow-5: 0 60px 160px rgba(20, 20, 50, .26);

  /* 浅色 Liquid Glass：白系高 tint + 白高光 + 投影减淡；禁用黑 tint（实测发灰发脏） */
  --lg-tint: rgba(255, 255, 255, 0.62);
  --lg-tint-strong: rgba(255, 255, 255, 0.90);
  --lg-hi-top: rgba(255, 255, 255, 0.95);
  --lg-hi-bottom: rgba(10, 10, 30, 0.05);
  --lg-hi-side: rgba(255, 255, 255, 0.55);
  --lg-spec: rgba(255, 255, 255, 0.45);
  --lg-stroke: rgba(10, 10, 30, 0.09);
  --lg-shadow: 0 10px 34px rgba(20, 20, 50, 0.10);
  --lg-shadow-hi: 0 18px 48px rgba(20, 20, 50, 0.14);
}

/* —— 增强对比（WCAG AAA 友好）：近实色背景 + 明确边界 —— */
@media (prefers-contrast: more) {
  :root {
    --bg-glass: var(--bg-2);
    --bg-glass-2: var(--bg-3);
    --bg-glass-strong: var(--bg-3);
    --hairline: var(--hairline-strong);
    --text-2: var(--text-1);
    --text-3: var(--text-2);
    --glass-hi: transparent;
  }
}

/* —— 减少透明：材质退化为实色 —— */
@media (prefers-reduced-transparency: reduce) {
  .glass, .nav, .toast, .modal, .mini-bar, .space-card, .post-card, .auth-card,
  .lyrics-card, .now-playing, .panel, .toolbar, .badge, .input, .textarea, .select {
    background: var(--bg-2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1) !important;
  }
}

/* —— 减少动效：位移动画 → 交叉淡化 —— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}