/* ============================================================================
 * 卿梦 Design Tokens · v2.5.0
 * 单一事实来源。所有组件、页面只允许引用这里的变量，不准出现魔法值。
 * 加载顺序：tokens.css → style.css → components.css
 * ==========================================================================*/

:root {
  /* ---------------- 1. 品牌色 ---------------- */
  --qm-primary:        #6C5CE7;
  --qm-primary-600:    #5B4BD6;
  --qm-primary-700:    #4B3CC0;
  --qm-primary-300:    #A29BFE;
  --qm-primary-100:    #EDEBFF;
  --qm-primary-50:     #F5F4FF;
  --qm-primary-ink:    #FFFFFF;

  /* 辅助色：暖橙（用于靓号、营销、强调） */
  --qm-accent:         #FF7A45;
  --qm-accent-600:     #F0652F;
  --qm-accent-100:     #FFEEE6;

  /* ---------------- 2. 语义色 ---------------- */
  --qm-success:        #10B981;
  --qm-success-ink:    #06795A;
  --qm-success-bg:     #E7FBF3;
  --qm-success-border: #A7F3D0;

  --qm-warning:        #F59E0B;
  --qm-warning-ink:    #9A5B00;
  --qm-warning-bg:     #FFF8E8;
  --qm-warning-border: #FDE68A;

  --qm-danger:         #EF4444;
  --qm-danger-ink:     #B42318;
  --qm-danger-bg:      #FEF1F1;
  --qm-danger-border:  #FECACA;

  --qm-info:           #3B82F6;
  --qm-info-ink:       #1D4ED8;
  --qm-info-bg:        #EFF6FF;
  --qm-info-border:    #BFDBFE;

  /* ---------------- 3. 中性色阶 ---------------- */
  --qm-n-0:    #FFFFFF;
  --qm-n-25:   #FCFCFE;
  --qm-n-50:   #F7F8FC;
  --qm-n-100:  #F1F3F9;
  --qm-n-200:  #E6E9F2;
  --qm-n-300:  #D5DAE6;
  --qm-n-400:  #A8B0C2;
  --qm-n-500:  #7C8598;
  --qm-n-600:  #5A6377;
  --qm-n-700:  #3D4557;
  --qm-n-800:  #262D3D;
  --qm-n-900:  #161B28;

  /* ---------------- 4. 语义表面（浅色） ---------------- */
  --qm-bg:             var(--qm-n-50);
  --qm-bg-soft:        var(--qm-n-100);
  --qm-surface:        #FFFFFF;
  --qm-surface-2:      var(--qm-n-25);
  --qm-surface-hover:  var(--qm-n-50);
  --qm-surface-sunken: var(--qm-n-100);
  --qm-border:         var(--qm-n-200);
  --qm-border-strong:  var(--qm-n-300);
  --qm-divider:        #EEF0F6;
  --qm-text:           #1B2030;
  --qm-text-2:         #5F6879;
  --qm-text-3:         #9098AA;
  --qm-text-inv:       #FFFFFF;
  --qm-overlay:        rgba(18, 20, 28, .52);
  --qm-glass:          rgba(255, 255, 255, .72);
  --qm-glass-border:   rgba(255, 255, 255, .72);

  /* ---------------- 5. 字体 ---------------- */
  --qm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --qm-font-num: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --qm-fs-xs:   12px;
  --qm-fs-sm:   13px;
  --qm-fs-base: 14px;
  --qm-fs-md:   15px;
  --qm-fs-lg:   16px;
  --qm-fs-xl:   18px;
  --qm-fs-2xl:  20px;
  --qm-fs-3xl:  24px;
  --qm-fs-4xl:  30px;
  --qm-fs-5xl:  38px;
  --qm-fs-6xl:  clamp(30px, 5vw, 46px);

  --qm-fw-normal: 400;
  --qm-fw-medium: 500;
  --qm-fw-semi:   600;
  --qm-fw-bold:   700;
  --qm-fw-black:  800;

  --qm-lh-tight:   1.25;
  --qm-lh-snug:    1.4;
  --qm-lh-normal:  1.6;
  --qm-lh-relaxed: 1.75;
  --qm-ls-tight:  -.02em;
  --qm-ls-wide:   .04em;

  /* ---------------- 6. 间距（4 基数） ---------------- */
  --qm-sp-1:  2px;
  --qm-sp-2:  4px;
  --qm-sp-3:  6px;
  --qm-sp-4:  8px;
  --qm-sp-5:  12px;
  --qm-sp-6:  16px;
  --qm-sp-7:  20px;
  --qm-sp-8:  24px;
  --qm-sp-9:  32px;
  --qm-sp-10: 40px;
  --qm-sp-11: 48px;
  --qm-sp-12: 64px;

  /* ---------------- 7. 圆角 ---------------- */
  --qm-r-xs:   6px;
  --qm-r-sm:   8px;
  --qm-r-md:   12px;
  --qm-r-lg:   16px;
  --qm-r-xl:   20px;
  --qm-r-2xl:  24px;
  --qm-r-3xl:  28px;
  --qm-r-full: 999px;

  /* ---------------- 8. 阴影 ---------------- */
  --qm-sh-xs: 0 1px 2px rgba(22, 27, 40, .05);
  --qm-sh-sm: 0 2px 8px rgba(22, 27, 40, .06);
  --qm-sh-md: 0 4px 20px rgba(22, 27, 40, .07);
  --qm-sh-lg: 0 10px 32px rgba(22, 27, 40, .10);
  --qm-sh-xl: 0 20px 56px rgba(22, 27, 40, .16);
  --qm-sh-primary: 0 8px 22px rgba(108, 92, 231, .28);
  --qm-sh-inset: inset 0 1px 0 rgba(255, 255, 255, .5);
  --qm-sh-glass: 0 8px 30px rgba(22, 27, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---------------- 9. 动效 ---------------- */
  --qm-dur-1: 120ms;
  --qm-dur-2: 200ms;
  --qm-dur-3: 320ms;
  --qm-dur-4: 480ms;
  --qm-ease:   cubic-bezier(.4, 0, .2, 1);
  --qm-ease-out: cubic-bezier(0, .55, .45, 1);
  --qm-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------------- 10. 层级 ---------------- */
  --qm-z-base:     1;
  --qm-z-dropdown: 100;
  --qm-z-sticky:   200;
  --qm-z-drawer:   300;
  --qm-z-modal:    400;
  --qm-z-toast:    500;

  /* ---------------- 11. 布局 ---------------- */
  --qm-container: 1240px;
  --qm-container-narrow: 880px;
  --qm-container-auth: 460px;
  --qm-gutter: 20px;
  --qm-header-h: 64px;
  --qm-tabbar-h: 64px;
  --qm-tabbar-gap: 18px;
  --qm-side-w: 320px;

  /* ---------------- 12. 会员 / 昵称渐变 ---------------- */
  --qm-member-none:   #1B2030;
  --qm-member-c1:     #FF4D4F;
  --qm-member-c2:     #FF7A45;
  --qm-vip-c1:        #F7C948;
  --qm-vip-c2:        #EF7D3B;
  --qm-vip-ink:       #7A4A00;

  --qm-grad-brand:  linear-gradient(120deg, var(--qm-primary), var(--qm-primary-300));
  --qm-grad-member: linear-gradient(100deg, #FF4D4F, #FF7A45 50%, #FF4D4F);
  --qm-grad-vip:    linear-gradient(100deg, #F7C948, #F59E0B 38%, #EF7D3B 68%, #F7C948);
  --qm-grad-pretty: linear-gradient(120deg, #F7C948, #F59E0B 45%, #EF7D3B);
  /* 底栏玻璃：默认「通透」档（仿比比工坊），.is-solid 切回浓玻璃 */
  --qm-grad-liquid: linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.26));
  --qm-grad-liquid-solid: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.52));
  --qm-grad-hero:   radial-gradient(900px 400px at 12% -10%, rgba(108,92,231,.22), transparent 62%),
                    radial-gradient(700px 360px at 88% 0%, rgba(162,155,254,.28), transparent 60%);
}

/* ============================ 暗色 ============================ */
.dark-mode,
[data-qm-theme="dark"] {
  --qm-bg:             #0F1119;
  --qm-bg-soft:        #151824;
  --qm-surface:        #1A1E2C;
  --qm-surface-2:      #202536;
  --qm-surface-hover:  #232839;
  --qm-surface-sunken: #14171F;
  --qm-border:         #2A2F42;
  --qm-border-strong:  #3A4157;
  --qm-divider:        #252A3B;
  --qm-text:           #E9ECF5;
  --qm-text-2:         #A3AAC0;
  --qm-text-3:         #7A8299;
  --qm-overlay:        rgba(4, 6, 12, .68);
  --qm-glass:          rgba(26, 30, 44, .72);
  --qm-glass-border:   rgba(255, 255, 255, .08);

  --qm-primary-100:    #2A2550;
  --qm-primary-50:     #211D3D;

  --qm-success-bg:     #0E2E27;
  --qm-success-ink:    #6EE7B7;
  --qm-success-border: #17564A;
  --qm-warning-bg:     #33260C;
  --qm-warning-ink:    #FCD34D;
  --qm-warning-border: #5A431A;
  --qm-danger-bg:      #35191B;
  --qm-danger-ink:     #FCA5A5;
  --qm-danger-border:  #5F2528;
  --qm-info-bg:        #12233D;
  --qm-info-ink:       #93C5FD;
  --qm-info-border:    #1E3A63;

  --qm-sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --qm-sh-sm: 0 2px 10px rgba(0, 0, 0, .38);
  --qm-sh-md: 0 6px 24px rgba(0, 0, 0, .42);
  --qm-sh-lg: 0 12px 36px rgba(0, 0, 0, .5);
  --qm-sh-xl: 0 24px 64px rgba(0, 0, 0, .6);
  --qm-sh-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
  --qm-sh-glass: 0 10px 36px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .08);

  --qm-grad-liquid: linear-gradient(135deg, rgba(40, 46, 68, .58), rgba(24, 28, 42, .44));
  --qm-grad-liquid-solid: linear-gradient(135deg, rgba(46, 52, 74, .86), rgba(26, 30, 44, .66));
  --qm-grad-hero:   radial-gradient(900px 400px at 12% -10%, rgba(108,92,231,.34), transparent 62%),
                    radial-gradient(700px 360px at 88% 0%, rgba(90,70,200,.26), transparent 60%);
  --qm-member-none: #E9ECF5;
  --qm-vip-ink:     #FFDE9B;
}

/* ================= 兼容旧变量（--zb-* 逐步淘汰） ================= */
:root {
  --zb-primary:       var(--qm-primary);
  --zb-primary-2:     var(--qm-primary-300);
  --zb-bg:            var(--qm-bg);
  --zb-surface:       var(--qm-surface);
  --zb-text:          var(--qm-text);
  --zb-text-2:        var(--qm-text-2);
  --zb-border:        var(--qm-border);
  --zb-radius:        var(--qm-r-lg);
  --zb-shadow:        var(--qm-sh-md);
  --zb-shadow-hover:  var(--qm-sh-primary);
}

/* ================= 基础重置 ================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--qm-font);
  font-size: var(--qm-fs-md);
  line-height: var(--qm-lh-relaxed);
  color: var(--qm-text);
  background: var(--qm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

:focus-visible {
  outline: 2px solid var(--qm-primary);
  outline-offset: 2px;
  border-radius: var(--qm-r-xs);
}

/* 统一滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--qm-n-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--qm-n-300); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.dark-mode *::-webkit-scrollbar-thumb { background: var(--qm-border-strong); background-clip: content-box; }

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