/* ============================================================
乐答题库 · 设计令牌（Design Tokens）
------------------------------------------------------------
本文件是全站唯一的「数值来源」。
改颜色、改字号、改间距、改圆角 —— 只改这里，全站自动生效。
引入顺序：必须放在 style.css 之前
============================================================ */
:root {
/* ---------------- 品牌色（已修正对比度）---------------- */
--brand: #1D6AE0; /* 原 #2E7BF6 白字仅 3.98:1，修正后 5.01:1 ✅ */
--brand-hover: #1A5FD0;
--brand-light: #4A9BF5; /* 渐变浅端 */
--brand-rgb: 29, 106, 224;
--brand-50: #EAF3FE; /* 极浅底 / 选中态 */
--brand-100: #D6E8FB;
--brand-200: #B9D6FB;
--brand-300: #8CC0FA;
/* ---------------- 文字（全部 ≥ 4.5:1）---------------- */
--text-1: #16233A; /* 标题 15.72:1 */
--text-1-rgb: 22, 35, 58;
--text-2: #3D4A5C; /* 正文 9.00:1 */
--text-3: #5A6B7F; /* 次要 5.46:1 */
--text-4: #667085; /* 辅助 4.97:1 ← 原 #8C99AC 仅 2.89 */
--text-placeholder: #667085; /* 占位符 4.55:1 ← 原 #6B7280 在 S3 上仅 4.42 ✗ 已修正 ✓
注：本产品多数输入框无独立 label，
占位符是唯一提示源，故必须达 AA */
--text-on-brand: #FFFFFF;
/* ---------------- 表面与描边 ---------------- */
--surface-1: #FFFFFF; /* 卡片 */
--surface-2: #F4F7FA; /* 输入框 / 分区底 */
--surface-3: #F2F5F9; /* 页面背景 */
--surface-hover: #FAFCFF;
--surface-grad-top: #E4F0FD; /* 登录页渐变起点 */
--surface-grad-mid: #F2F8FF; /* 登录页渐变中段 */
--border-1: #EEF2F8; /* 分隔线 */
--border-2: #E2EAF3; /* 输入框描边 */
--debug-bg: #FFF3CD; /* 调试模式提示条 */
/* ---------------- 语义色（全部 ≥ 4.5:1）---------------- */
--success: #2E7D32; /* 白字 4.62:1 ✅ */
--success-bg: #EAF7EF;
--success-border: #CFE8C4;
--warning: #B45309; /* 白字 4.51:1 ✅ ← 原 #E8892E 仅 2.61 */
--warning-bg: #FDF0E8;
--warning-note-bg: #FFF8E6;
--warning-note-bd: #FFE0A3;
--warning-note-tx: #8A6100;
--danger: #B91C1C; /* 白字 5.94:1 ✅ ← 原 #C45656 仅 4.36 */
--danger-bg: #FDF3F3;
--danger-border: #F2CFCF;
--gold: #B8860B; /* 收藏星标（图形用） */
--gold-rgb: 184, 134, 11; /* 给 rgba() 拼光环 / 阴影 */
--gold-text: #8A6400; /* 金色【文字】：白底 5.38:1 ✓
（直接用 --gold 只有 3.3:1 ✗ 小字不合格） */
--gold-bg: #FDF6E3; /* 已收藏底色 */
--gold-border: #E5CE93; /* 已收藏描边（比 --gold 柔和一档） */
--wechat: #07C160; /* ★ 当前无使用者：登录页的微信授权入口已移除
（网页版不做微信登录）。
作为品牌色保留在令牌库，日后若恢复直接引用即可。 */
/* ---------------- 装饰（仅图形/图标，不承载信息）---------------- */
--decor-1: #C2CBD8;
--decor-2: #D9E0E8;
/* ---------------- 字阶（PC 端，10 档）----------------
★ 全站 font-size 只允许取以下值。
定位：比移动端原稿整体大一档，但不过度放大（用户实测校准）。
--------------------------------------------------------
xs 14 角标 / 徽章
sm 15 辅助说明、次要信息
base 16 界面默认（按钮、菜单、表单）+ 正文 ★
md 18 正文强调
lg 20 小标题
xl 22 区块标题
2xl 24 卡片标题
3xl 28 页面标题 / 数据大字
4xl 32 大标题
5xl 40 超大数字
-------------------------------------------------------- */
--fs-xs: 14px;
--fs-sm: 15px;
--fs-base: 16px;
--fs-md: 18px;
--fs-lg: 20px;
--fs-xl: 22px;
--fs-2xl: 24px;
--fs-3xl: 28px;
--fs-4xl: 32px;
--fs-5xl: 40px;
--lh-tight: 1.3;
--lh-base: 1.6;
--lh-loose: 1.9;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 600;
/* ---------------- 间距（4px 基准，8 档替代 39 种）---------------- */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
/* ---------------- 圆角（5 档替代 20 种）---------------- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--r-xl: 22px;
--r-full: 999px;
/* ---------------- 阴影（5 档替代 23 种）---------------- */
--sh-1: 0 1px 3px rgba(22, 35, 58, .04);
--sh-2: 0 4px 16px rgba(22, 35, 58, .06);
--sh-3: 0 12px 32px rgba(22, 35, 58, .10);
--sh-brand: 0 8px 22px rgba(var(--brand-rgb), .24);
--sh-modal: 0 24px 64px rgba(22, 35, 58, .22);
/* ---------------- 动效（4 档替代 8 种）----------------
★★ 「进场快、退场慢」是按压类反馈的铁律（别改回对称）★★
------------------------------------------------------------
一次点击只有 60~120ms。若进场和退场用同一条时长，
按下时的过渡还没走完就松手了，会被中途反向 —— 亮点一闪而过，
观感就是「闪眼睛」（导航涟漪层曾踩过这个坑）。
所以按压反馈拆成两档：
进场 --dur-press（≈90ms）：走得快，点击才有「跟手」的反馈感；
退场 --dur-slow（360ms）：走得慢，亮点柔和淡出、不刺眼，
顺带让「刚点过哪里」多停留一瞬，反而更好读。
实现方式见 style.css 的 .menu span::after —— 基础态写退场时长，
:active 里用 transition-duration 覆盖成进场时长。
------------------------------------------------------------ */
--dur-press: 90ms; /* 进场：按压反馈专用，宁可快 */
--dur-fast: 150ms; /* 常规小过渡（颜色、边框） */
--dur-base: 220ms; /* 常规位移 / 展开 */
--dur-slow: 360ms; /* 退场：柔和淡出专用，别拿去做进场 */
--ease: cubic-bezier(.4, 0, .2, 1); /* 标准：起步快、收尾稳 */
--ease-out: cubic-bezier(.22, .9, .28, 1); /* 柔和减速：退场 / 淡出 */
/* ---------------- 布局 ---------------- */
--topbar-h: 60px; /* 与 .topbar 高度保持一致 */
--content-w: 1280px;
--tap-min: 44px; /* 最小触控区（WCAG） */
/* ---------------- 首页轮播图（Banner）----------------
★★ 上线前请把这里改成【后台接口图片的真实宽高】★★
------------------------------------------------------------
这两项决定轮播图容器的固定比例，全站只在此处定义一次。
为什么锁死比例：后台可能配多张图，切换时若高度跟着图片比例变，
整个 Hero 区（含左侧分类面板）会上下跳动，观感很差。
锁死后切图高度纹丝不动，比例不符的图由 object-fit: cover 裁掉边缘。
当前值 1100/481 是 APP 内置图（assets/home/hero-banner.webp）的实际尺寸。
拿到接口图尺寸后，把下面两个数改成图片的宽、高即可，其余代码无需改动。
例：接口图是 750×300 → 改成 --banner-w: 750; --banner-h: 300; */
--banner-w: 1100;
--banner-h: 481;
/* ---------------- 层级（z-index）----------------
规则：顶栏必须高于所有页面内容，否则 sticky 顶栏会被内容盖住。
页面内元素只允许用 1~90；高于 100 的留给浮层。 */
--z-base: 1;
--z-content: 20; /* 卡片 / 悬浮面板等页面内元素 */
--z-topbar: 200; /* ★ 顶栏：高于一切页面内容 */
--z-mask: 300; /* 弹窗遮罩 */
--z-toast: 400;
}
/* ============================================================
无障碍基础层
⚠️ 说明：本文件在 style.css 之前引入，而组件层里存在
`input:focus { outline: none }` 之类的写法。
:focus-visible 与 :focus 特异性相同，会被后引入的覆盖，
因此这里对无障碍样式使用 !important —— 这是少数正当用法：
无障碍保障不应被业务样式意外抹掉。
============================================================ */
/* 1) 键盘焦点：全局可见（原来 :focus-visible 规则为 0 条）
—— 鼠标点击不显示，键盘 Tab 必显示 */
:focus-visible {
outline: 2px solid var(--brand) !important;
outline-offset: 2px !important;
}
/* 主色按钮上的焦点环用白色 + 光晕，保证在蓝底上可见 */
.btn-login:focus-visible,
.btn-start:focus-visible,
.btn-save:focus-visible,
.qbtn.primary:focus-visible,
.adj-btn:focus-visible {
outline: 2px solid var(--surface-1) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .45) !important;
}
/* 2) 输入类控件：描边代替 outline，避免双框。
★ 通用输入框保留 outline（无障碍：键盘 Tab 可见焦点）。 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--brand) !important;
outline-offset: 0 !important;
}
/* 例外：「胶囊 / 卡片外壳 + 内层 input」的控件，焦点反馈已由外壳的
`:focus-within` border-color 承担（见 style.css）。若再画 outline，
就会在外壳之外多套一圈直角蓝框 —— 这正是顶栏搜索框「两层框」的成因。
下面三条特异性更高（.a input > input），足以覆盖上面的通用规则。 */
.topbar-search input:focus-visible,
.ipt input:focus-visible,
.search-box input:focus-visible {
outline: none !important;
}
/* 3) 尊重「减弱动效」系统偏好 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* 4) 触控目标最小尺寸（仅对明确的交互控件，不影响布局容器） */
.logout,
.adj-btn,
.go,
.getcode,
.sbtn {
min-height: var(--tap-min);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 例外：表格/列表内的行内「查看」链接保持紧凑 */
.list-row-s .go,
.rec-row .go {
min-height: 34px;
}
/* 5) 文本选中色跟随品牌 */
::selection {
background: rgba(var(--brand-rgb), .18);
color: var(--text-1);
}
/* 6) 滚动条统一（视觉一致性） */
* {
scrollbar-width: thin;
scrollbar-color: var(--decor-1) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--decor-1);
border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }
/* ══════════════════════════════════════════════════════════════
阅读模式：日间 / 夜间 / 护眼
══════════════════════════════════════════════════════════════
★★ 这次之前，那三个胶囊【只是画上去的】✗
`readingMode` 这个 ref 从定义到废弃，没有任何地方读它 ✗
→ 点了没有任何反应 ✓ 用户说是"自慰的"一点不冤 ✓
★★ 做法：**只覆盖变量层** ✓
样式表里绝大多数颜色都走 var(--surface-x) / var(--text-x) ✓
所以换一套变量 = 换一套主题 ✓ 不用改任何组件 ✗
★ 全站唯一的事实来源仍然是 tokens.css ✓ 主题也是它的一部分 ✓
★★ 对比度都算过（WCAG AA，正文 ≥4.5:1）✓
· 日间 最差 4.55 ✓
· 夜间 最差 5.14 ✓（标题 13.67 ✓）
· 护眼 最差 5.01 ✓
★ 前面连着栽过两次"字色撞底色" ✗ 所以这次**先算再写** ✓
★ 护眼保持品牌蓝不变 ✓ —— 只把"底"换成暖米黄 ✓
整片改成绿色反而会让品牌色不协调 ✗ 而且绿色底配蓝字很难好看 ✗
============================================================ */
/* ---------------- 夜间 ---------------- */
:root[data-read-mode="night"] {
--brand-50: #1E2F52;
--brand-100: #24395F;
--brand-200: #2C4670;
--text-1: #E8EDF5; /* S1 上 13.67:1 ✓ */
--text-1-rgb: 232, 237, 245;
--text-2: #C6D0DE; /* S1 上 10.31:1 ✓ */
--text-3: #9EABBE; /* S1 上 6.90:1 ✓ */
--text-4: #8B98AB; /* S1 上 5.49:1 ✓ */
--text-placeholder: #8593A6; /* S1 上 5.14:1 ✓ */
--surface-1: #1B2130; /* 卡片 */
--surface-2: #232B3D; /* 输入框 / 分区底 */
--surface-3: #151A26; /* 页面背景 */
--surface-hover: #273043;
--surface-grad-top: #1A2233;
--surface-grad-mid: #171D2A;
--border-1: #2A3346;
--border-2: #38445C;
--success: #4ADE80;
--success-bg: #1B3326;
--success-border: #2A4C39;
--warning: #F0B85C;
--warning-bg: #3A2F1A;
--warning-note-bg: #3A2F1A;
--warning-note-bd: #5A4A26;
--warning-note-tx: #F0C877;
--danger: #F87171;
--danger-bg: #3A2024;
--danger-border: #5A2E33;
--gold: #E0B341;
--gold-rgb: 224, 179, 65;
--gold-text: #E0B341; /* 深底 6.70:1 ✓ */
--gold-bg: #3A2F12; /* ★ 夜间必须用它，不能用浅米色 #FDF6E3 ✗ */
--gold-border: #6B5622;
--decor-1: #3A465C;
--decor-2: #2E3A4E;
}
/* ---------------- 护眼（暖米黄纸感）---------------- */
:root[data-read-mode="eye"] {
--text-1: #2B2618; /* S1 上 13.95:1 ✓ */
--text-1-rgb: 43, 38, 24;
--text-2: #4A4331; /* S1 上 9.09:1 ✓ */
--text-3: #665E48; /* S1 上 5.96:1 ✓ */
--text-4: #6E6650; /* S1 上 5.28:1 ✓ */
--text-placeholder: #6E6650; /* S1 上 5.28:1 ✓ */
--surface-1: #FAF6EA; /* 卡片：暖纸 */
--surface-2: #F3EEDD; /* 输入框 */
--surface-3: #F5F0E2; /* 页面背景 */
--surface-hover: #FCF8EE;
--surface-grad-top: #F2EBD8;
--surface-grad-mid: #F8F3E6;
--border-1: #E8E0CB;
--border-2: #DDD3BA;
--brand-50: #EAF0F8; /* 选中态保持偏蓝，别跟着发黄 ✓ */
--brand-100: #DCE7F5;
/* 暖纸底比纯白暗，白色底那组金色文字（#8A6400）在这里只有 4.45:1，
差一点点不达标 → 单独压深一档 */
--gold-text: #7A5800; /* 纸底 5.98:1 ✓ */
--gold-bg: #F4E9CC;
--gold-border: #DCC68E;
}