/* 赛璞科技官网 - 设计令牌（双主题）
 *
 * 浅色为默认（:root），深色走 :root[data-theme="dark"] 覆盖。
 * 切换由 js/theme.js 写 data-theme 属性驱动，各页 <head> 里有一段
 * 防闪烁内联脚本负责首帧前就把属性挂上，避免深色用户刷新时闪白。
 *
 * 所有色值都经过 WCAG AA 实测：
 *   - 文字类 ≥ 4.5:1
 *   - 纯图形类（bullet 点、渐变描边、图标）≥ 3.0:1
 * 改色值前请跑 bin/check-contrast.py 复核，不要凭观感调。
 */

:root {
  /* ── 背景 ── */
  --bg-primary: #fafbfd;          /* 页面底：带一点蓝的近白，比纯白柔和 */
  --bg-secondary: #eef2f8;        /* 分区底：与页面底拉开约 0.06 亮度 */
  --bg-card: #ffffff;
  --bg-card-hover: #f7f9fc;
  --bg-elevated: #ffffff;         /* 下拉菜单、浮层 */
  --bg-inset: #f1f4f9;            /* 代码块、截图窗口栏等内凹面 */

  /* ── 文字 ── */
  --text-primary: #0f172a;        /* 17.24 */
  --text-secondary: #475569;      /*  7.32 */
  --text-muted: #646f82;          /*  4.90 */
  --text-inverse: #ffffff;

  /* ── 品牌与强调 ── */
  --brand: #4f46e5;               /*  6.07  延续 logo 的靛蓝 */
  --brand-hover: #4338ca;
  --brand-soft: rgba(79,70,229,0.09);
  --vivid: #0891b2;               /*  3.56  活力色，仅用于图形元素 */
  --vivid-text: #0e7490;          /*  5.17  活力色文字安全变体 */
  --vivid-soft: rgba(8,145,178,0.10);

  /* ── 描边与分隔 ── */
  --border-color: #dde3ec;
  --border-strong: #c8d2e0;
  --border-subtle: #e8edf4;

  /* ── 阴影：浅色模式靠阴影建立层级 ── */
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 12px 32px -8px rgba(15,23,42,0.10);
  --shadow-lift: 0 2px 4px rgba(15,23,42,0.05), 0 18px 40px -10px rgba(15,23,42,0.14);
  --shadow-menu: 0 4px 6px -2px rgba(15,23,42,0.06), 0 16px 40px -8px rgba(15,23,42,0.18);

  /* ── 导航栏滚动后的背景 ── */
  --nav-scrolled-bg: rgba(250,251,253,0.82);
  --nav-mobile-bg: rgba(250,251,253,0.94);

  /* ── 页面底纹：极淡网格，数据/坐标系隐喻，静态无动画 ── */
  --grid-line: rgba(15,23,42,0.055);

  /* ── 全宽色带：打破"一白到底"的两处分段 ──
   *
   * 这组令牌深浅两个主题各一套（深色那套在 :root[data-theme="dark"] 里）。
   * 一开始想共用一套深色值，实测在浅色页面上不行：#fafbfd 直接切到深靛蓝是硬边界，
   * 整条带看着像一块贴上去的框，而且压得重。试过给上下加渐变羽化，
   * 结果连白色数字一起糊掉半截，像脏光晕，更糟。
   *
   * 浅色主题就用浅色带：品牌紫淡淡过渡到青，和页面底色几乎连成一片，没有边界感。
   * 文字换成 --text-* 那套深色，对比度反而比原来的白字高一倍（14+ vs 7.27）。
   * 深色主题保留深色带（见下面的覆盖）——深底上它比页面更亮，反差本来就成立。 */
  --band-bg: linear-gradient(135deg, #e8eaff 0%, #dfe3ff 50%, #dcf4fb 100%);
  --band-text: #0f172a;
  --band-muted: #475569;
  --band-line: rgba(15,23,42,0.13);
  /* 浅色带上的玻璃卡要比带更白才浮得起来，深色带上则要比带更暗，方向是反的 */
  --band-card: rgba(255,255,255,0.62);
  --band-shadow: 0 16px 36px -14px rgba(49,46,129,0.26);

  /* ── 8 个产品标识色（浅色模式变体，全部 ≥4.5） ── */
  --p-supertrade: #2563cc;        /* 5.43 */
  --p-insightforge: #6d47c4;      /* 6.06 */
  --p-spotadvisor: #177f5c;       /* 4.80 */
  --p-yanshi: #8a6510;            /* 5.14 */
  --p-veriq: #be3c7e;             /* 4.90 */
  --p-bidscout: #c23a3a;          /* 5.12 */
  --p-shoeops: #0f766e;           /* 5.29 */
  --p-thesora: #4f46c9;           /* 6.65 */

  /* ── 兼容别名 ──
   * 首页/关于页正文里有内联 var(--accent-*)，指向产品色即可随主题自动切换。
   * 新写的样式一律直接用 --p-* 或 --brand，不要再用这组别名。*/
  --accent-blue: var(--p-supertrade);
  --accent-purple: var(--p-insightforge);
  --accent-green: var(--p-spotadvisor);
  --accent-amber: var(--p-yanshi);

  /* ── 几何与排版 ── */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --font-cn: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-en: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  --nav-height: 64px;
  --max-width: 1200px;
}

:root[data-theme="dark"] {
  --bg-primary: #12151c;
  --bg-secondary: #181c25;
  --bg-card: #1b1f29;
  --bg-card-hover: #21262f;
  --bg-elevated: #232833;
  --bg-inset: #171b23;

  --text-primary: #e8eaf0;        /* 15.18 */
  --text-secondary: #a0a8b8;      /*  7.64 */
  --text-muted: #7b8494;          /*  4.84 */
  --text-inverse: #12151c;

  --brand: #818cf8;               /*  6.12 */
  --brand-hover: #a5b0fb;
  --brand-soft: rgba(129,140,248,0.14);
  --vivid: #22d3ee;               /* 10.11 */
  --vivid-text: #67e8f9;          /* 12.60 */
  --vivid-soft: rgba(34,211,238,0.13);

  --border-color: #2a3040;
  --border-strong: #3a4254;
  --border-subtle: #222734;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 12px 32px -8px rgba(0,0,0,0.45);
  --shadow-lift: 0 2px 4px rgba(0,0,0,0.35), 0 18px 40px -10px rgba(0,0,0,0.55);
  --shadow-menu: 0 4px 6px -2px rgba(0,0,0,0.35), 0 16px 40px -8px rgba(0,0,0,0.60);

  --nav-scrolled-bg: rgba(18,21,28,0.82);
  --nav-mobile-bg: rgba(18,21,28,0.95);

  --grid-line: rgba(232,234,240,0.05);

  /* 色带在深色主题下走深色：底色 #12151c 上它比页面更亮更饱和，反差本来就成立，
   * 换成浅色带反而会是刺眼的一块。
   * 三个色标里青端 #155e75 是最亮的一点，整条带的对比度由它一家说了算——
   * 更亮的 #0e7490 上 74% 白只有 3.69 不过 4.5。起点和中段只要待在它亮度
   * (0.0945)之下就不影响对比度，所以能提到 indigo-900/700 这一档；
   * 再往上到品牌色 #4f46e5(0.1170) 会顶掉青端成为新上限，muted 掉到 4.19。 */
  --band-bg: linear-gradient(135deg, #312e81 0%, #4338ca 52%, #155e75 100%);
  --band-text: #ffffff;
  --band-muted: rgba(255,255,255,0.74);
  --band-line: rgba(255,255,255,0.16);
  --band-card: rgba(255,255,255,0.07);
  --band-shadow: 0 18px 40px -12px rgba(0,0,0,0.45);

  /* 产品标识色回到高亮变体（深底上全部 ≥4.5）*/
  --p-supertrade: #5b93f5;        /* 6.03 */
  --p-insightforge: #9b7bf6;      /* 5.70 */
  --p-spotadvisor: #34d399;       /* 9.50 */
  --p-yanshi: #fbbf24;            /* 10.94 */
  --p-veriq: #f472b6;             /* 6.90 */
  --p-bidscout: #f87171;          /* 6.60 */
  --p-shoeops: #14b8a6;           /* 7.34 */
  --p-thesora: #818cf8;           /* 6.12 — 原 #6366f1 在深底只有 3.77，顺带修掉 */
}

/* 切换主题时的过渡：只过渡颜色，不过渡布局，避免切换瞬间页面抖动 */
:root.theme-transition,
:root.theme-transition *,
:root.theme-transition *::before,
:root.theme-transition *::after {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, fill .25s ease, stroke .25s ease !important;
}

/* 跟随系统：仅在用户从未手动选过主题时生效（js/theme.js 只有在
 * localStorage 无记录时才不写 data-theme，此时下面这段接管）*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #12151c;
    --bg-secondary: #181c25;
    --bg-card: #1b1f29;
    --bg-card-hover: #21262f;
    --bg-elevated: #232833;
    --bg-inset: #171b23;
    --text-primary: #e8eaf0;
    --text-secondary: #a0a8b8;
    --text-muted: #7b8494;
    --text-inverse: #12151c;
    --brand: #818cf8;
    --brand-hover: #a5b0fb;
    --brand-soft: rgba(129,140,248,0.14);
    --vivid: #22d3ee;
    --vivid-text: #67e8f9;
    --vivid-soft: rgba(34,211,238,0.13);
    --border-color: #2a3040;
    --border-strong: #3a4254;
    --border-subtle: #222734;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 12px 32px -8px rgba(0,0,0,0.45);
    --shadow-lift: 0 2px 4px rgba(0,0,0,0.35), 0 18px 40px -10px rgba(0,0,0,0.55);
    --shadow-menu: 0 4px 6px -2px rgba(0,0,0,0.35), 0 16px 40px -8px rgba(0,0,0,0.60);
    --nav-scrolled-bg: rgba(18,21,28,0.82);
    --nav-mobile-bg: rgba(18,21,28,0.95);
    --grid-line: rgba(232,234,240,0.05);
    --band-bg: linear-gradient(135deg, #312e81 0%, #4338ca 52%, #155e75 100%);
    --band-text: #ffffff;
    --band-muted: rgba(255,255,255,0.74);
    --band-line: rgba(255,255,255,0.16);
    --band-card: rgba(255,255,255,0.07);
    --band-shadow: 0 18px 40px -12px rgba(0,0,0,0.45);
    --p-supertrade: #5b93f5;
    --p-insightforge: #9b7bf6;
    --p-spotadvisor: #34d399;
    --p-yanshi: #fbbf24;
    --p-veriq: #f472b6;
    --p-bidscout: #f87171;
    --p-shoeops: #14b8a6;
    --p-thesora: #818cf8;
  }
}