/* 主题覆盖层：把 tokens.css 的调色板换成 keyscan 那一套

   为什么是"覆盖"而不是直接改 tokens.css：那三份（tokens / base / components）
   是从教师工具箱**照搬**过来的，一字未改才好在两边同步问题时对照。
   这一层放在它后面加载，重定义同名变量即可 —— components.css 里所有
   现成组件（按钮、卡片、输入框、弹窗、Toast）自动跟着变，不用逐个改。

   取自 keyscan：
     主色  #2563EB      深主色 #1E3A8A
     正文  #142A4A（深海军蓝，不是黑）
     次要  #4B5E7E
     底色  #F7FAFF      边框 #E3EAF7
     顶部深色渐变 #0B1E3E → #123A7E → #1E56C4
   区别是那边是一次性看的落地页，这个站是反复用的工具，所以顶部深色带压薄，
   卡片间距收紧，标题左对齐而不是居中。 */

:root {
  --blue-600: #2563EB;
  --blue-800: #1E3A8A;
  --bg: #F7FAFF;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E3EAF7;
  --text: #142A4A;
  --text-muted: #4B5E7E;

  --radius-card: 18px;

  /* 药丸按钮是 keyscan 最显眼的特征之一。不动 --radius-control，
     因为输入框也用它 —— 药丸形状的输入框只会让人以为按了没反应。 */
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(20, 42, 74, .04), 0 10px 30px rgba(20, 42, 74, .06);
  --shadow-lift: 0 14px 34px rgba(37, 99, 235, .12);

  --band: linear-gradient(135deg, #0B1E3E 0%, #123A7E 55%, #1E56C4 100%);
  --band-ink: #FFFFFF;
  --band-ink-soft: rgba(255, 255, 255, .72);
  --band-line: rgba(255, 255, 255, .16);

  /* 明细表滚动阴影（见 app.css 的 .table-wrap） */
  --scroll-fade: rgba(20, 42, 74, .16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue-600: #6AA3FF;
    --blue-800: #6AA3FF;
    --bg: #0A1424;
    --surface: #111E33;
    --surface-raised: #16263F;
    --border: #23364F;
    --text: #E6EDF8;
    --text-muted: #9DB0CC;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .28);
    --shadow-lift: 0 14px 34px rgba(0, 0, 0, .45);

    /* 深色下顶部带子要比页面底色更沉，否则整屏一个色调，分不出层次 */
    --band: linear-gradient(135deg, #06101F 0%, #0C2450 55%, #143A8C 100%);
    --scroll-fade: rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --blue-600: #6AA3FF;
  --blue-800: #6AA3FF;
  --bg: #0A1424;
  --surface: #111E33;
  --surface-raised: #16263F;
  --border: #23364F;
  --text: #E6EDF8;
  --text-muted: #9DB0CC;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .28);
  --shadow-lift: 0 14px 34px rgba(0, 0, 0, .45);
  --band: linear-gradient(135deg, #06101F 0%, #0C2450 55%, #143A8C 100%);
  --scroll-fade: rgba(0, 0, 0, .55);
}

/* --------------------------------------------------------------------------
   顶部：Header 和标题带连成一整块深色
   -------------------------------------------------------------------------- */

.site-header {
  background: transparent;
  border-bottom: 1px solid var(--band-line);
  box-shadow: none;
}
.site-header,
.hero-band {
  color: var(--band-ink);
}
.brand__name { color: var(--band-ink); }
.brand__sub { color: var(--band-ink-soft); }

.site-nav a { color: var(--band-ink-soft); }
.site-nav a:hover { background: rgba(255, 255, 255, .1); color: var(--band-ink); }
.site-nav a[aria-current="page"] { color: var(--band-ink); font-weight: 700; }

.icon-btn {
  border-color: var(--band-line);
  background: rgba(255, 255, 255, .08);
  color: var(--band-ink);
}
.icon-btn:hover { background: rgba(255, 255, 255, .16); }

/* --------------------------------------------------------------------------
   按钮：药丸形
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--primary { box-shadow: 0 6px 18px rgba(37, 99, 235, .22); }
.btn--primary:hover { box-shadow: 0 10px 24px rgba(37, 99, 235, .3); }

/* --------------------------------------------------------------------------
   卡片：抬一点，鼠标悬停轻微上浮（跟 keyscan 一致）
   -------------------------------------------------------------------------- */

.card {
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* 只有可点的整卡才上浮；表单卡片跟着动会让人以为它能点 */
.card--tap:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none; }
  .btn:hover, .card--tap:hover { transform: none; }
}

/* 标识字段的按钮：要跟普通题型区分开（它们收的是个人信息），
   但三个实心琥珀药丸在深蓝体系里太吵。改成描边 —— 一眼看得出不一样，
   又不至于抢走「+ 单选题」这个主操作的注意力。 */
.btn--accent {
  background: transparent;
  border-color: var(--yellow-500);
  color: var(--text);
  font-weight: 600;
}
.btn--accent:hover {
  background: color-mix(in srgb, var(--yellow-500) 14%, transparent);
  filter: none;
  color: var(--text);
}