/* ============================================================
   Soul 塔罗 · 设计数值表
   ------------------------------------------------------------
   这一层只放「数值」。改颜色、改尺寸、改节奏都在这里改，
   不用碰任何 .js 文件。
   （配色沿用旧 UI 壳的 Nocturne 系统，视觉一致）
   ============================================================ */

:root {
  /* ---- 底色 ---- */
  --color-bg:        #161826;   /* 页面底 */
  --color-surface:   #232532;   /* 卡片/气泡底 */
  --color-text:      #e9e9ed;   /* 正文 */
  --color-divider:   color-mix(in srgb, #e9e9ed 16%, transparent);

  /* ---- 强调色（blurple） ---- */
  --color-accent:     #9184d9;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-600: #796cbf;
  --color-accent-900: #2b2741;

  /* ---- 中性阶 ---- */
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-800: #3f424d;

  /* ---- 字体 ---- */
  --font-serif: 'Noto Serif SC', 'Songti SC', serif;   /* 标题、牌名 */
  --font-sans:  'Noto Sans SC', -apple-system, sans-serif; /* 正文、按钮 */

  /* ---- 间距 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- 圆角 ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- 阴影 ---- */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,.65);

  /* ============================================================
     牌条（对话页顶部那一条）—— 这几个数是调手感的
     ============================================================ */
  --strip-height:      88px;   /* 条的总高 */
  --strip-top:         18px;   /* 离导航栏多远 —— 这就是「呼吸」 */
  --strip-fade:        34px;   /* 条下面那圈渐隐有多深 */
  --strip-card-w:      42px;   /* 缩略牌宽 */
  --strip-card-h:      70px;   /* 缩略牌高 */
  --strip-gap:         6px;    /* 牌之间的距离 */
  --strip-bg:          #1b1d2c;

  /* 展开后的牌阵覆盖层 */
  --spread-card-w:     128px;  /* 大牌宽 */
  --spread-card-h:     213px;  /* 大牌高 */
  --spread-overlay-bg: rgba(13,13,22,.975);
  --spread-anim:       .32s;   /* 展开/收起时长 */

  /* 黑框收成窄条那个过渡 —— 改时长记得同步 app.js 的 MORPH_MS */
  --morph-dur:  .76s;
  --morph-ease: cubic-bezier(.42, 0, .18, 1);

  /* ---- 对话气泡 ---- */
  --bubble-max:      68%;    /* 气泡最大宽度 */
  --bubble-radius:   14px;
  --bubble-soul-bg:  #232532;
  --bubble-user-bg:  #2b2741;
  --chat-line-height: 1.9;
  --chat-font-size:   15px;

  /* ---- 层级（z 轴）：牌阵层和对话层永不打架 ---- */
  --z-chat:     1;    /* 对话流 */
  --z-fade:     5;    /* 顶部渐隐遮罩：压住滚上来的文字，压不住牌条 */
  --z-strip:    10;   /* 顶部牌条（吸顶） */
  --z-overlay:  100;  /* 牌阵展开层，盖住对话、不推开对话 */
  --z-morph:    500;  /* 形变过渡的替身层 */
  --z-modal:    1000; /* 弹窗 */
}