/* =============================================
   全站主题令牌 —— 唯一事实来源

   由两个页面在各自样式之前引入：
     · /app   -> theme.css 然后 style.css（看板组件样式）
     · /      -> theme.css 然后页面内联样式（落地页组件样式）
   令牌必须先立、组件后取，故 <link> 顺序不可调换。

   本文件取代了原先两处各自为政的定义（public/style.css 的 :root 与
   public/index.html 内联 :root/深色块）——那两处灰度值不同、深色覆盖范围也不同，
   导致同一站点在两个页面间灰度不一致，且落地页拿不到用户手动选的主题。

   深色有两个入口、共用同一份值（CSS 没有「复用一份声明」的机制，只能各写一遍）：
     · :root[data-theme="dark"]            —— 手动切到深色。两个页面的 <head> 内联
                                              脚本按 localStorage(qu_theme_v1) + 系统偏好
                                              提前写入，无闪白；
     · @media (prefers-color-scheme: dark) 下的 :root:not([data-theme="light"])
                                              —— 禁用 JS 时仍跟随系统。
   改令牌只改这里；两个入口必须同步改。
   ============================================= */

:root {
  color-scheme: light;

  /* 蓝色体系（主色 --blue-600） */
  --blue-50:  #F0F7FF;
  --blue-100: #E0EFFF;
  --blue-200: #C7DDFF;
  --blue-300: #A0C4FF;
  --blue-400: #6EA8FE;
  --blue-500: #4080F0;
  --blue-600: #2B6BDB;
  --blue-700: #1B56C4;
  --blue-800: #1540A0;
  --blue-900: #0D2B6E;

  /* 辅助色 tint */
  --teal-50:  #EFFDF6;
  --teal-500: #14B8A6;
  --green-50:  #ECFDF5;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --amber-50:  #FFFBEB;
  --amber-500: #F59E0B;
  --red-50:   #FEF2F2;
  --red-500:  #EF4444;

  /* 灰阶（浅色：深字浅底） */
  --gray-25:  #FCFDFE;
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-150: #EEF0F2;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* 中性底色 */
  --surface:   #ffffff;
  --surface-2: var(--gray-25);

  /* 字体：不拉外部 CDN（纯离线定位），中文优先苹方/微软雅黑 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --num: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.04);

  /* 图表序列色板（app.js 的 CHART_COLORS 按序引用）。
     浅色取 600 级（白底对比度 ≥ 3:1，满足 WCAG 1.4.11 非文本对比）；
     深色在下方换成 300/400 级亮色，避免深底上糊成一团。 */
  --ch-1:  #2563EB;
  --ch-2:  #0D9488;
  --ch-3:  #D97706;
  --ch-4:  #DC2626;
  --ch-5:  #7C3AED;
  --ch-6:  #0284C7;
  --ch-7:  #16A34A;
  --ch-8:  #DB2777;
  --ch-9:  #9333EA;
  --ch-10: #EA580C;
  --ch-11: #059669;
  --ch-12: #4F46E5;
  --ch-13: #65A30D;
  --ch-14: #E11D48;

  /* 语义令牌：随主题翻转的组件底色。组件只引用它们，不再各自覆写 :root，
     落地页与看板因此自动保持一致。 */
  /* 落地页固定导航的半透明底（毛玻璃） */
  --nav-bg: rgba(255, 255, 255, 0.92);
  /* 深色带（技术栈 / 页脚）：设计上恒为深底白字，不参与灰阶反相，
     否则深色模式下会翻成白底白字而整块消失 */
  --band-bg:  #111827;
  --on-band:  rgba(255, 255, 255, 0.5);
  /* 「来自缓存」徽标：缓存命中时的正向强调色（浅色深字浅底，深色入口换成亮字） */
  --ok-fg: #166534;
  --ok-bg: #ECFDF5;
  --ok-bd: #BBF7D0;

  /* 涨跌 / 危险语义色：作为正文文字（涨跌值、错误提示）与 Toast 底色使用，
     WCAG AA 普通文本要求 4.5:1。浅色取 700/600 级（白底 5.02 / 4.83）；
     600/500 级原色在白底只有 3.30 / 3.76，只许用于 ≥3:1 的非文本场景。 */
  --up-fg:   #15803D;
  --down-fg: #DC2626;
  /* Toast 底色：两个主题共用（深底浮层上白字 5.02 / 4.83，均达标） */
  --up-bg:   #15803D;
  --down-bg: #DC2626;

  /* 横向滚动容器的边缘阴影色（宽表「这里还能滑」的提示，见 style.css 的
     .data-table-wrap；阴影只在真有溢出时出现，纯 CSS 无需 JS） */
  --scroll-shadow: rgba(15, 23, 42, 0.16);
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #131A27;
  --surface-2: #0F1621;

  --gray-25:  #0E1420;
  --gray-50:  #0A0F18;
  --gray-100: #161D2A;
  --gray-150: #1B2331;
  --gray-200: #28313F;
  --gray-300: #3A4658;
  --gray-400: #6C7A8F;
  --gray-500: #8B97AA;
  --gray-600: #AEB9C9;
  --gray-700: #CBD3DF;
  --gray-800: #E1E7EF;
  --gray-900: #F3F6FA;

  --blue-50:  #142138;
  --blue-100: #17263F;
  --blue-200: #1E3054;

  --teal-50:  #0F2A27;
  --green-50: #0E2A1F;
  --amber-50: #2A2210;
  --red-50:   #2C1717;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.6), 0 2px 4px -2px rgba(0,0,0,0.45);

  /* 图表色板：深底上改用 300/400 级亮色（600 级在深色背景上对比不足） */
  --ch-1:  #60A5FA;
  --ch-2:  #2DD4BF;
  --ch-3:  #FBBF24;
  --ch-4:  #F87171;
  --ch-5:  #A78BFA;
  --ch-6:  #38BDF8;
  --ch-7:  #4ADE80;
  --ch-8:  #F472B6;
  --ch-9:  #C084FC;
  --ch-10: #FB923C;
  --ch-11: #34D399;
  --ch-12: #818CF8;
  --ch-13: #A3E635;
  --ch-14: #FB7185;

  --nav-bg:  rgba(10, 15, 24, 0.85);
  --band-bg: #060B14;
  --ok-fg: #4ADE80;
  --ok-bg: #0E2A1F;
  --ok-bd: #14532D;

  /* 涨跌 / 危险文字：深底换 400 级亮色（#131A27 上 10.0 / 6.3） */
  --up-fg:   #4ADE80;
  --down-fg: #F87171;

  --scroll-shadow: rgba(0, 0, 0, 0.55);
}

/* =============================================
   跨页面基线（不属于某个页面的组件样式，故放令牌文件末尾）

   1) ::selection —— 选中态跟主色走。shadcn/ui 的 globals.css 同样把
      selection 做成令牌（--selection / --selection-foreground）；本项目的
      语义是「浅色蓝底白字感的浅蓝底深蓝字」，深色入口换亮字，避免默认的
      蓝底白字在深色界面上刺眼。
   2) 移动端两条基线声明（与 Tailwind Preflight 一致）：
      - -webkit-text-size-adjust: 100% —— iOS 横竖屏切换时会自动放大正文，
        写死 100% 让排版可预期；
      - -webkit-tap-highlight-color: transparent —— 去掉移动端点击瞬间
        浏览器画的那块蓝色高亮，点击反馈由 :active / :focus-visible 负责。
     两者都是纯增益、无副作用，故直接进基线而不是留给各页面自己补。
   深色有三个入口要同步（手动、跟随系统、以及下面的媒体查询块内嵌），
   与文件头「深色两个入口必须同步改」同一条纪律。
   ============================================= */
::selection { background: var(--blue-100); color: var(--blue-900); }
:root[data-theme="dark"] ::selection { background: var(--blue-200); color: var(--gray-900); }

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* 滚动条细身化（Chromium / Safari 走 -webkit- 前缀，Firefox 走 scrollbar-width）。
   默认滚动条在 Windows 上是一条粗灰边，与全站的细边框（1px --gray-200）不搭；
   收窄到 10px 并用灰阶上色，hover 时略深提示可拖拽。
   放在令牌文件而不是组件文件：两处需要它的地方（.data-table-wrap 宽表横向、
   .palette-list / .help-dialog 浮层纵向）分属不同页面，令牌是唯一共同入口。 */
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 6px;
  /* 内缩一圈做出「浮在内容上」的间隙，而不是贴着容器边 */
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* 无 JS（或内联脚本被隐私模式挡住）时仍跟随系统；已显式选浅色则不进场。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

  --surface: #131A27;
  --surface-2: #0F1621;

  --gray-25:  #0E1420;
  --gray-50:  #0A0F18;
  --gray-100: #161D2A;
  --gray-150: #1B2331;
  --gray-200: #28313F;
  --gray-300: #3A4658;
  --gray-400: #6C7A8F;
  --gray-500: #8B97AA;
  --gray-600: #AEB9C9;
  --gray-700: #CBD3DF;
  --gray-800: #E1E7EF;
  --gray-900: #F3F6FA;

  --blue-50:  #142138;
  --blue-100: #17263F;
  --blue-200: #1E3054;

  --teal-50:  #0F2A27;
  --green-50: #0E2A1F;
  --amber-50: #2A2210;
  --red-50:   #2C1717;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.6), 0 2px 4px -2px rgba(0,0,0,0.45);

  /* 图表色板：深底上改用 300/400 级亮色（600 级在深色背景上对比不足） */
  --ch-1:  #60A5FA;
  --ch-2:  #2DD4BF;
  --ch-3:  #FBBF24;
  --ch-4:  #F87171;
  --ch-5:  #A78BFA;
  --ch-6:  #38BDF8;
  --ch-7:  #4ADE80;
  --ch-8:  #F472B6;
  --ch-9:  #C084FC;
  --ch-10: #FB923C;
  --ch-11: #34D399;
  --ch-12: #818CF8;
  --ch-13: #A3E635;
  --ch-14: #FB7185;

  --nav-bg:  rgba(10, 15, 24, 0.85);
  --band-bg: #060B14;
  --ok-fg: #4ADE80;
  --ok-bg: #0E2A1F;
  --ok-bd: #14532D;

  /* 涨跌 / 危险文字：深底换 400 级亮色（#131A27 上 10.0 / 6.3） */
  --up-fg:   #4ADE80;
  --down-fg: #F87171;

  --scroll-shadow: rgba(0, 0, 0, 0.55);
  }
}