/* ============================================================
   DualStar · 韩系低饱和主题系统
   黑白灰 调色 · 深浅色自动跟随系统
   ============================================================ */

:root {
  /* —— 浅色模式（默认） —— */
  --bg: #FAFAFA;                /* 主背景 近白 */
  --bg-soft: #F5F5F5;           /* 次级背景 浅灰 */
  --bg-elevated: #FFFFFF;       /* 卡片 纯白 */
  --card-bg: #FFFFFF;           /* 卡片背景（与 --bg-elevated 一致） */
  --bg-glass: rgba(255, 255, 255, 0.96); /* 毛玻璃（提高不透明度，移除 backdrop-filter 以提升性能） */

  --surface: #EFEFEF;           /* 次级表面 */
  --surface-hover: #E8E8E8;

  --text: #1A1A1A;              /* 主文字 近黑 */
  --text-secondary: #666666;    /* 次级文字 中灰 */
  --text-tertiary: #6E6E6E;     /* 三级文字（WCAG AA 对比度） */
  --text-inverse: #FFFFFF;

  --accent: #333333;            /* 强调 深灰 */
  --accent-deep: #1A1A1A;       /* 深强调 近黑 */
  --accent-soft: #E8E8E8;       /* 浅强调 */

  --highlight: #888888;         /* 点缀 中灰 */
  --highlight-deep: #666666;

  --danger: #E04848;            /* 危险 降饱和红 */
  --success: #52C41A;

  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.08);

  --wechat-sent: #b5c9b8;       /* 微信发送气泡 韩系鼠尾草绿 */
  --wechat-received: #FFFFFF;   /* 微信接收气泡 纯白 */

  /* —— 半径 —— */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* —— 间距 —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* —— 字体 —— */
  --font-display: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-body: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-title: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;

  /* —— 动效 —— */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --dur-slower: 800ms;

  /* —— 尺寸 —— */
  --phone-w: 375px;
  --phone-h: 760px;
  --phone-radius: 44px;
  --dock-h: 84px;
  --statusbar-h: 44px;

  /* 一起听歌播放器条 主题适配变量 */
  --lt-overlay: rgba(0, 0, 0, 0.06);        /* 按钮半透明背景 */
  --lt-overlay-strong: rgba(0, 0, 0, 0.12);  /* 播放按钮半透明背景 */
  --lt-overlay-hover: rgba(0, 0, 0, 0.10);  /* hover 状态 */
  --lt-border: rgba(0, 0, 0, 0.08);          /* 边框/进度条轨道 */
  --lt-fill: var(--accent);                   /* 进度条填充 */
  --lt-thumb: var(--bg);                      /* 进度条手柄 */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1A1A;              /* 纯黑底 */
    --bg-soft: #222222;
    --bg-elevated: #2A2A2A;     /* 卡片 */
    --card-bg: #2A2A2A;
    --bg-glass: rgba(42, 42, 42, 0.96);

    --surface: #2E2E2E;
    --surface-hover: #383838;

    --text: #E8E8E8;            /* 主文字 浅灰 */
    --text-secondary: #AAAAAA;
    --text-tertiary: #8E8E8E;
    --text-inverse: #1A1A1A;

    --accent: #CCCCCC;          /* 强调 浅灰 */
    --accent-deep: #E8E8E8;
    --accent-soft: #2E2E2E;

    --highlight: #888888;
    --highlight-deep: #AAAAAA;

    --danger: #E04848;
    --success: #52C41A;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);

    --wechat-sent: #5a7363;     /* 深色鼠尾草绿 */
    --wechat-received: #2A2A2A;

    /* 一起听歌播放器条 夜间模式覆盖 */
    --lt-overlay: rgba(255, 255, 255, 0.12);
    --lt-overlay-strong: rgba(255, 255, 255, 0.22);
    --lt-overlay-hover: rgba(255, 255, 255, 0.18);
    --lt-border: rgba(255, 255, 255, 0.15);
    --lt-fill: rgba(255, 255, 255, 0.9);
    --lt-thumb: #fff;

    color-scheme: dark;
  }
}

/* 用户强制深色 */
:root[data-theme="dark"] {
  --bg: #1A1A1A;
  --bg-soft: #222222;
  --bg-elevated: #2A2A2A;
  --card-bg: #2A2A2A;
  --bg-glass: rgba(42, 42, 42, 0.96);
  --surface: #2E2E2E;
  --surface-hover: #383838;
  --text: #E8E8E8;
  --text-secondary: #AAAAAA;
  --text-tertiary: #8E8E8E;
  --text-inverse: #1A1A1A;
  --accent: #CCCCCC;
  --accent-deep: #E8E8E8;
  --accent-soft: #2E2E2E;
  --highlight: #888888;
  --highlight-deep: #AAAAAA;
  --danger: #E04848;
  --success: #52C41A;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
  --wechat-sent: #5a7363;
  --wechat-received: #2A2A2A;
  color-scheme: dark;
}

/* 用户强制浅色 */
:root[data-theme="light"] {
  color-scheme: light;
}