/* 鲸致思可见 · UI 设计令牌层（第九阶段③ UI 改造）
 * 依据 docs/ui-design-spec.md（参考站 computed-style 实测值），纯 CSS 零依赖。
 * 引入方式：theme.js 之后、页面自有 <style> 之前加一行
 *   <link rel="stylesheet" href="/assets/ui-tokens.css">
 * 字体子集：assets/vendor/fonts/（Noto Serif SC 700 ≈300KB + Inter 900 italic ≈18KB，font-display:swap）
 *
 * 只提供「变量 + 5 个工具类」，不改变量名不抢页面样式——页面已有的 --bg/--t1 等本地变量不受影响。
 * 浅色主题经 html[data-theme="light"] 整层覆盖，与 theme.js 的机制一致。 */

/* ---------- 1. @font-face（子集字体，仅标题使用） ---------- */
@font-face {
  font-family: "Noto Serif SC Subset";
  src: url("/assets/vendor/fonts/NotoSerifSC-700.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Black Italic Subset";
  src: url("/assets/vendor/fonts/Inter-900-italic.subset.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. 设计令牌（深色为默认，浅色整层覆盖） ---------- */
:root {
  /* 玻璃层：白 3.5% 底 + 8% 描边 + 24px blur + 大投影（参考站实测） */
  --ui-glass-bg: rgba(255, 255, 255, 0.035);
  --ui-glass-border: rgba(255, 255, 255, 0.08);
  --ui-glass-blur: 24px;
  --ui-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* 三级圆角 */
  --ui-radius-card: 20px;
  --ui-radius-chip: 6px;
  --ui-radius-pill: 9999px;

  /* 缓动：卡片 easeOutExpo 系 0.35s；大面板 0.7s 标准缓动 */
  --ui-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-t-card: 0.35s var(--ui-ease-out-expo);
  --ui-t-panel: 0.7s cubic-bezier(0.4, 0, 0.2, 1);

  /* 金色 kicker（≈#B28E4A，只用于眉标/徽章） */
  --ui-gold: rgb(178, 142, 74);

  /* 8 学科 accent（bio=emerald / chem=cyan / phy=amber / math=indigo / geo=amber-orange
     / science=sky / chinese=rose / history=purple / ns=lime / olympiad=orange） */
  --acc-physics: rgb(245, 158, 11);
  --acc-biology: rgb(16, 185, 129);
  --acc-chemistry: rgb(6, 182, 212);
  --acc-math: rgb(99, 102, 241);
  --acc-geography: rgb(217, 119, 6);
  --acc-science: rgb(14, 165, 233);
  --acc-chinese: rgb(244, 63, 94);
  --acc-history: rgb(192, 132, 252);
  --acc-natural-science: rgb(132, 204, 22);
  --acc-primary-olympiad: rgb(249, 115, 22);
}
:root[data-theme="light"] {
  --ui-glass-bg: rgba(255, 255, 255, 0.66);
  --ui-glass-border: rgba(15, 23, 42, 0.12);
  --ui-glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --ui-gold: #9a7434;
}

/* ---------- 2.5 header 静默文字按钮 .link-btn（2026-10-02 去「AI 味」改版） ----------
 * 旧形态：每个动作一个描边圆角小按钮，一排全是同权重「芯片」，是典型 AI 生成页的标志。
 * 新形态：默认无边框纯文字（次级动作），悬停浮出浅底；描边形态只留给主动作（.link-btn.primary）。
 * 页面内联的旧 .link-btn 规则已全部移除，此处为唯一来源。 */
.link-btn {
  background: none; border: none; color: var(--t2, #94a3b8);
  padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.4;
  font-family: inherit;
  transition: color .15s ease, background-color .15s ease, opacity .15s ease;
}
.link-btn:hover { color: var(--t1, #f8fafc); background: var(--hover-bg, rgba(255,255,255,0.08)); }
.link-btn:active { opacity: .6; }
.link-btn.primary {
  border: 1px solid var(--ui-glass-border); color: var(--t1, #f8fafc);
  padding: 6px 14px;
}
.link-btn.primary:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.05); }
:root[data-theme="light"] .link-btn:hover { background: var(--hover-bg, rgba(15,23,42,0.06)); }
:root[data-theme="light"] .link-btn.primary { border-color: rgba(15,23,42,0.16); }
:root[data-theme="light"] .link-btn.primary:hover { border-color: rgba(15,23,42,0.3); background: rgba(15,23,42,0.04); }

/* ---------- 3. 五个工具类 ---------- */

/* 3.1 .glass 玻璃卡：统一参考站质感的容器 */
.ui-glass, .glass {
  background: var(--ui-glass-bg);
  border: 1px solid var(--ui-glass-border);
  -webkit-backdrop-filter: blur(var(--ui-glass-blur));
  backdrop-filter: blur(var(--ui-glass-blur));
  border-radius: var(--ui-radius-card);
  box-shadow: var(--ui-glass-shadow);
}

/* 3.2 .pill 药丸筛选器：idle=玻璃描边灰字 / .on(active)=accent 实底黑字
   accent 由页面在容器上指定（--pill-accent），未指定时退回金色 */
.ui-pill, .pill {
  padding: 7px 16px;
  font-size: 12.5px;
  line-height: 1.4;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-glass-border);
  background: var(--ui-glass-bg);
  color: rgb(161, 161, 170);
  cursor: pointer;
  transition: background var(--ui-t-card), color var(--ui-t-card), border-color var(--ui-t-card);
}
.ui-pill:hover, .pill:hover { color: var(--t1, #f8fafc); border-color: rgba(255,255,255,0.22); }
:root[data-theme="light"] .ui-pill:hover, :root[data-theme="light"] .pill:hover { color: #1a2740; border-color: rgba(15,23,42,0.3); }
.ui-pill.on, .pill.on, .ui-pill.active, .pill.active {
  background: var(--pill-accent, var(--ui-gold));
  border-color: transparent;
  color: #111;
  font-weight: 700;
}

/* 3.3 .kicker 眉标：金/学科色小字距全大写英文，配中文大标题使用 */
.ui-kicker, .kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kicker-color, var(--ui-gold));
  margin-bottom: 10px;
}

/* 3.4 .hero-serif 中文衬线大标题：高级感的第一来源 */
.ui-hero-serif, .hero-serif {
  font-family: "Noto Serif SC Subset", Georgia, "Noto Serif SC", "Songti SC", serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.18;
}

/* 3.5 .cover-card 整卡封面：整图铺底 + 底部暗渐变 + 左下标题
   结构约定：<a class="cover-card"><img><span class="cc-kicker">英文眉标</span><b class="cc-title">标题</b></a> */
.ui-cover-card, .cover-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ui-radius-card);
  background: #0b1226;
  box-shadow: var(--ui-glass-shadow);
  cursor: pointer;
  transition: transform var(--ui-t-card), box-shadow var(--ui-t-card), border-color var(--ui-t-card);
  border: 1px solid var(--ui-glass-border);
}
.ui-cover-card:hover, .cover-card:hover { transform: translateY(-4px) scale(1.01); }
.ui-cover-card > img, .cover-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-cover-card::after, .cover-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(4, 7, 16, 0.82));
  pointer-events: none;
}
.ui-cover-card .cc-kicker, .cover-card .cc-kicker {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cc-accent, var(--ui-gold));
}
.ui-cover-card .cc-title, .cover-card .cc-title {
  position: absolute;
  left: 16px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  color: #f8fafc;
  font-family: "Inter Black Italic Subset", Inter, "Arial Black", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* 西文 900 斜体英文大字（学科页页眉用） */
.ui-en-black {
  font-family: "Inter Black Italic Subset", Inter, "Arial Black", sans-serif;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ---------- 滚动条统一：细圆角低调款（全站） ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.28); border-radius: 99px; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.5); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.35) transparent; }