/* ============================================================
   声音助手 —— 全站统一主题
   配色标准：访问验证页（深色为基准色板）
   明暗自动跟随系统：prefers-color-scheme
   内页（index.html）与访问验证页（login.html）共用本文件
   ============================================================ */

:root {
  /* 背景 / 表面 */
  --bg: #0b0b10;
  --bg2: #0e0e15;
  --bg3: #14141c;
  --surface: #14141c;
  --surface-hover: #1b1b25;
  --page-glow: #1a1a2b;
  --dot: #2a2a36;

  /* 描边 */
  --border: #26262f;
  --border-active: #7c6cff;

  /* 主色 */
  --accent: #7c6cff;
  --accent-hover: #8f81ff;
  --accent-dim: rgba(124, 108, 255, 0.12);
  --accent-glow: rgba(124, 108, 255, 0.28);
  --on-accent: #ffffff;
  --on-accent-soft: rgba(255, 255, 255, 0.3);

  /* 文字 */
  --text: #ececf1;
  --text-dim: #cdcdd8;
  --text-muted: #8b8b99;

  /* 语义色：危险 */
  --danger: #ff5c5c;
  --danger-bg: rgba(255, 92, 92, 0.1);
  --danger-border: rgba(255, 92, 92, 0.32);
  --danger-bg-hover: rgba(255, 92, 92, 0.2);
  --danger-text: #ff9b9b;

  /* 语义色：成功 */
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --success-border: rgba(52, 211, 153, 0.32);
  --success-bg-hover: rgba(52, 211, 153, 0.2);

  /* 阴影 / 滚动条 / 加载环底 */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.55);
  --track: rgba(255, 255, 255, 0.16);
  --scrollbar: rgba(255, 255, 255, 0.14);
  --scrollbar-hover: rgba(255, 255, 255, 0.26);

  /* 圆角 / 字体 */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --font-sans: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-display: 'Syne', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  color-scheme: dark;
}

/* ── 系统浅色时的同色系浅色板 ── */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7fb;
    --bg2: #efeff6;
    --bg3: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f3f3f9;
    --page-glow: #eae8ff;
    --dot: #d9d9e6;

    --border: #dedee9;
    --border-active: #5b4bd6;

    --accent: #5b4bd6;
    --accent-hover: #4c3dc0;
    --accent-dim: rgba(91, 75, 214, 0.1);
    --accent-glow: rgba(91, 75, 214, 0.22);

    --text: #14141c;
    --text-dim: #2b2b38;
    --text-muted: #64646f;

    --danger: #d93030;
    --danger-bg: rgba(217, 48, 48, 0.08);
    --danger-border: rgba(217, 48, 48, 0.3);
    --danger-bg-hover: rgba(217, 48, 48, 0.15);
    --danger-text: #b32525;

    --success: #0f9d58;
    --success-bg: rgba(15, 157, 88, 0.1);
    --success-border: rgba(15, 157, 88, 0.3);
    --success-bg-hover: rgba(15, 157, 88, 0.18);

    --shadow-sm: 0 1px 4px rgba(16, 16, 30, 0.06);
    --shadow-md: 0 8px 32px rgba(16, 16, 30, 0.12);
    --track: rgba(0, 0, 0, 0.14);
    --scrollbar: rgba(0, 0, 0, 0.14);
    --scrollbar-hover: rgba(0, 0, 0, 0.24);

    color-scheme: light;
  }
}