/* ========================================
   行之 Theme System — 共享主题层
   "Corporate Navy"（深海军蓝 + 中性灰）

   本文件被官网 / 登录页 / 个人中心 / 管理后台共同引用，且在四类页面中
   均【最后加载】（site.css → site-pages.css → theme.css；admin/styles.css → theme.css），
   因此这里承载「跨页面共享」的三类内容：

     1. 共享令牌：基础令牌的浅色档 + 交互 / 高亮 / 滚动条等新增令牌；
     2. 全局 UX 基础层：焦点环、按压反馈、选中高亮、等宽数字、禁用态、滚动条；
     3. 跨页面共享组件（主题切换按钮）。

   具体组件样式一律由各页面自己的样式表负责，且全部基于令牌，
   因此浅色/深色无需成对覆写。
   ======================================== */

/* ─── 1. 共享令牌 · 深色（默认） ───
   只声明各页面样式表【未定义】的交互 / 高亮 / 滚动条令牌，
   不重复声明 --bg / --text 等基础令牌，避免出现第二个事实源。 */
:root {
  /* 交互层（hover / active / 行高亮） */
  --hover: rgba(148, 163, 184, 0.08);
  --hover-strong: rgba(148, 163, 184, 0.14);
  --row-hover: rgba(148, 163, 184, 0.05);
  --pressed: rgba(148, 163, 184, 0.16);

  /* 高亮背景（chip / tag / 选中态）
     深色主题用「半透明语义色叠底」，与深色面自然融合。 */
  --chip-success-bg: rgba(52, 211, 153, 0.16);
  --chip-warn-bg: rgba(234, 179, 8, 0.16);
  --chip-error-bg: rgba(248, 113, 113, 0.16);
  --chip-info-bg: rgba(96, 165, 250, 0.16);
  --chip-purple-bg: rgba(167, 139, 250, 0.16);
  --chip-gold-bg: rgba(217, 164, 65, 0.16);
  --chip-neutral-bg: rgba(148, 163, 184, 0.14);

  /* 通道令牌：供 rgba() 组合使用（与 --primary-rgb 等同一约定）。
     --success-rgb 原先只在 site.css 定义，管理后台没有 -> 补到共享层。 */
  --success-rgb: 52, 211, 153;
  --purple-rgb: 167, 139, 250;

  /* 次级面：比 --bg 略深一档的填充面（侧栏/表头/内嵌块） */
  --surface-2: #0e1626;

  /* 语义色实心底上的前景（btn-danger/success 的 hover 态） */
  --on-error: #0b1220;
  --on-success: #0b1220;

  /* 文本选中高亮 */
  --selection-bg: rgba(122, 167, 240, 0.30);

  /* 滚动条 */
  --scrollbar-track: #0d1526;
  --scrollbar-thumb: rgba(148, 163, 184, 0.24);
  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.40);

  /* 让原生控件（日期选择器 / 下拉列表 / 滚动条）跟随深色 */
  color-scheme: dark;
}

/* ─── 2. 共享令牌 · 浅色 ─── */
[data-theme="light"],
body.light {
  --bg: #f6f8fb;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --card: #ffffff;
  --card-solid: #ffffff;

  --border: #e3e8ef;
  --border-light: #eef1f6;
  --border-strong: #cbd5e1;
  --border-glow: rgba(30, 64, 175, 0.30);

  --text: #0f172a;
  --text2: #5b6779;
  /* 修正：原 #8794a7 在 --bg 上仅 2.89:1（低于 AA 4.5:1），
     深一档到 #667080 → bg 4.71 / card 5.01 / 表头底 4.57，全部达标。 */
  --text3: #667080;

  --primary: #1e40af;
  --primary-h: #1d4ed8;
  --primary-solid: #1e40af;
  --primary-solid-h: #1a3699;
  --on-primary: #ffffff;
  --accent: rgba(30, 64, 175, 0.07);
  --accent2: rgba(30, 64, 175, 0.05);

  --success: #15803d;
  --warn: #b45309;
  --error: #b91c1c;
  --info: #1d4ed8;
  --purple: #6d28d9;
  --gold: #a16207;
  --gold-h: #b45309;

  /* 交互层：浅色底上用主色微叠，比灰色叠底更协调 */
  --hover: rgba(30, 64, 175, 0.06);
  --hover-strong: rgba(30, 64, 175, 0.10);
  --row-hover: rgba(30, 64, 175, 0.04);
  --pressed: rgba(30, 64, 175, 0.12);

  /* 高亮背景：浅色主题改用「浅实底 + 深字」的实色 chip。
     原因：在半透明语义色叠底上，提高 alpha 只会让底色更接近前景色，
     对比度反而下降（实测 success 0.16→0.28 时由 4.05 掉到 3.38）。
     实色档位取 Tailwind 50 级底 + 现有 700/800 级前景，全部 ≥ 4.5:1。 */
  --chip-success-bg: #dcfce7; /* #15803d on it = 4.57 */
  --chip-warn-bg: #fef3c7;    /* #b45309 on it = 4.51 */
  --chip-error-bg: #fee2e2;   /* #b91c1c on it = 5.30 */
  --chip-info-bg: #dbeafe;    /* #1d4ed8 on it = 5.49 */
  --chip-purple-bg: #ede9fe;  /* #6d28d9 on it = 5.98 */
  --chip-gold-bg: #fef9c3;    /* #a16207 on it = 4.58 */
  --chip-neutral-bg: #f1f5f9; /* #5b6779 on it = 5.24 */

  --purple-rgb: 109, 40, 217;
  --surface-2: #f8fafc;

  --on-error: #ffffff;
  --on-success: #ffffff;

  --selection-bg: rgba(30, 64, 175, 0.18);

  --scrollbar-track: #eef1f6;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-deep: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06);
  --glass-blur: none;
  --glass-blur-sm: none;
  --glow-top: none;
  --glow-gold: none;

  --primary-rgb: 30, 64, 175;
  --accent-rgb: 37, 99, 235;
  --gold-rgb: 161, 98, 7;
  --success-rgb: 21, 128, 61;
  --error-rgb: 185, 28, 28;
  --text-rgb: 15, 23, 42;

  color-scheme: light;
}

/* ─── 3. 浅色主题下的背景 ─── */
[data-theme="light"] body,
body.light {
  background: var(--bg);
}

/* ─── 4. 装饰性元素在两种主题下均禁用（商务简洁） ─── */
.orb,
.orb-1,
.orb-2,
.orb-3,
.hero-glow,
.hero-glow.g1,
.hero-glow.g2,
.cursor-glow,
.hero-canvas,
.gradient-border::before {
  display: none !important;
}
.card::before,
.login-container::before,
.chart-box::before,
.table-wrap::before,
.modal::before,
.modal-box::before,
.welcome-banner::before,
.welcome-banner::after,
.changelog-content::before,
.mission-banner::before,
.mission-banner::after,
.site-nav::after,
.site-footer::before,
.pricing-card.popular::before,
.cta-banner::before,
.top-bar::before,
.sidebar::before,
.sidebar .logo::after,
.empty-state::before,
.collapsible-header::before,
.model-type-panels::before {
  display: none !important;
}

/* ========================================
   5. 全局 UX 基础层
   四类页面统一生效，是「交互反馈 / 可达性 / 可读性」的单一实现处。
   ======================================== */

/* ─── 5.1 键盘焦点环（WCAG 2.4.7 Focus Visible） ───
   只在键盘导航时出现（:focus-visible），鼠标点击不显示，避免视觉噪音。
   注意：不设置 border-radius —— 否则会给圆角按钮/卡片叠上错误圆角。 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent);
}
/* 开关：原生 input 被 opacity:0 隐藏，焦点环转移到可见的滑轨上 */
.toggle-switch input:focus-visible + .slider {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─── 5.2 按压反馈（点击反馈） ───
   统一「按下即下沉 1px」，不做 hover 位移（商务风保持平稳）。
   transform 不参与布局，因此不会引起重排抖动。 */
.btn:active,
button:active,
[role="button"]:active,
.tab-btn:active,
.sub-tabs .tab-btn:active,
.model-type-tabs .tab-btn:active,
.pagination button:active {
  transform: translateY(1px);
}
/* 图标型小按钮：下沉改为内缩，视觉更贴手 */
.theme-toggle:active,
.hamburger:active,
.refresh-btn:active,
.lang-switch button:active,
.btn-back:active {
  transform: scale(0.94);
}
/* 组件自身已定义 :active（.btn-ai-optimize 的 scale(.97) 等）优先级更高，
   本层不会覆盖它们。 */

/* ─── 5.3 文本选中高亮 ─── */
::selection {
  background: var(--selection-bg);
  color: var(--text);
}

/* ─── 5.4 等宽数字 ───
   仪表盘数值 / 时间 / 表格数字使用 tabular-nums，
   数字变化时字宽恒定，不会左右抖动。 */
.mono,
code,
kbd,
samp,
pre,
.tnum,
.stat-value,
.mini-value,
.card .value,
.top-bar-time,
.changelog-date,
.billing-amount,
.pagination button {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ─── 5.5 徽标基线对齐 ───
   inline-block + padding 会让徽标与相邻文字的基线错位；
   改用 inline-flex 居中并锁死行高，保证在表格/标题里都对齐。 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

/* ─── 5.6 高亮背景：统一 chip 语义底 ───
   各页面原先直接写 rgba(语义色, 0.16)，在浅色主题下对比度不达标；
   这里统一改为令牌，深浅主题各自取到合格值。 */
.badge-success,
.chip-success {
  background: var(--chip-success-bg);
}
.badge-warn,
.chip-warn {
  background: var(--chip-warn-bg);
}
.badge-error,
.chip-error {
  background: var(--chip-error-bg);
}
.badge-info,
.chip-info {
  background: var(--chip-info-bg);
}

/* ─── 5.7 禁用态 ─── */
:disabled,
[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn:disabled,
button:disabled {
  box-shadow: none;
}
.btn:disabled:active,
button:disabled:active {
  transform: none;
}

/* ─── 5.8 滚动条（深浅双主题统一） ─── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
/* Firefox（scrollbar-color 可继承，声明在根元素即可，避免 * 选择器开销） */
html {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ─── 5.9 减少动效（尊重系统设置） ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active,
  button:active,
  [role="button"]:active,
  .tab-btn:active,
  .theme-toggle:active,
  .hamburger:active,
  .refresh-btn:active {
    transform: none;
  }
}

/* ========================================
   6. 跨页面共享组件
   ======================================== */

/* ─── 6.1 主题切换按钮（官网 / 管理后台共用） ─── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease,
    transform 0.1s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--accent);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* 深色下显示「太阳」（点击切到浅色），浅色下显示「月亮」 */
.theme-toggle .sun-icon { display: block; }
.theme-toggle .moon-icon { display: none; }
[data-theme="light"] .theme-toggle .sun-icon { display: none; }
[data-theme="light"] .theme-toggle .moon-icon { display: block !important; }