/*
* tokens.css —— 前台门户设计令牌
* ------------------------------------------------------------------
* 依据「我试试书库」设计规范落地（参考 shujixin/design-spec.md 与 tokens.css）。
*
* 【加载方式】在 fonts.css 之后、页面样式之前引入：
*
*
*
* 【约束】
* - 品牌图形色（--blue/--cyan/--green/--orange）禁止用于 ≤18px 文字，
* 浅色底小字号一律使用对应 *-text 文字色（≥4.5:1）。
* - 深色区（Header/Hero/Footer）文字使用 --on-dark* 与 --cyan-on-dark。
* - 组件样式禁止硬编码色值，跨断点尺寸一律通过文末断点级令牌覆盖。
* - transition 必须显式声明 transition-property，禁止裸写 transition: .3s。
* ------------------------------------------------------------------
*/
:root {
/* ================================================================
* 1. 色彩 —— 中性色
* ================================================================ */
--ink: #172033; /* 主文字（深蓝黑，非纯黑） on #fff = 16.27:1 */
--muted: #607087; /* 次要文字 on #fff = 5.04:1 */
--faint: #48698f; /* 弱文字 / 状态条默认文字 */
--line: #dbe6ef; /* 标准边框、分割线 */
--soft: #f4f8fb; /* 柔和背景填充 */
--card: #ffffff; /* 卡片背景 */
--page-bg: #eef5f8; /* body 页面底色 */
--cover-bg: #edf3f6; /* 封面图占位底色 */
/* ================================================================
* 2. 色彩 —— 品牌「图形色」
* 仅用于图标、边框、渐变、徽章底。
* ⚠️ 禁止用于 ≤18px 的文字，四者在白底上均不达 WCAG AA 4.5:1。
* ================================================================ */
--blue: #177fc1; /* on #fff = 4.34:1 */
--cyan: #35c7d8; /* on #fff = 2.04:1 */
--green: #2fa36b; /* on #fff = 3.20:1 */
--orange: #f59e3d; /* on #fff = 2.13:1 */
/* ================================================================
* 3. 色彩 —— 品牌「文字色」
* 用于浅色背景上的小字号品牌色文字，对比度以 --page-bg 为基准，
* 四者均 ≥ 4.5:1，满足 WCAG 2.1 AA 正文要求。
* ================================================================ */
--blue-text: #1469a3; /* on #eef5f8 = 5.32:1 */
--cyan-text: #0d7482; /* on #eef5f8 = 4.97:1 —— Section Kicker 用色 */
--green-text: #217548; /* on #eef5f8 = 5.15:1 */
--orange-text: #a35c07; /* on #eef5f8 = 4.66:1 */
/* ================================================================
* 4. 色彩 —— 深色区（Hero / Header / Footer）
* ================================================================ */
--navy-hero: #081b36; /* Hero 底色 */
--navy-footer: #071d38; /* Footer 底色 */
--navy-header: rgba(6, 24, 47, .94); /* 固定头部底色（配 backdrop-filter） */
--navy-header-solid: #071d38; /* 移动端降级：关闭毛玻璃后的纯色底 */
--header-border: rgba(104, 190, 221, .28);
--on-dark: #ffffff; /* on --navy-hero = 17.21:1 */
--on-dark-soft: rgba(238, 250, 255, .86);/* Hero 副文案 */
--on-dark-nav: rgba(236, 249, 255, .84);/* 导航文字 */
--on-dark-muted: rgba(232, 249, 255, .78);/* Footer 正文 */
--on-dark-faint: rgba(232, 249, 255, .68);/* Footer 版权条 */
--cyan-on-dark: #60d8ea; /* on --navy-hero = 10.25:1；导航 hover 色 */
/* Hero 遮罩（无背景图时退化为纯深色底） */
--hero-scrim: linear-gradient(90deg,
rgba(5, 17, 34, .86),
rgba(7, 34, 62, .34) 52%,
rgba(5, 17, 34, .78));
/* ================================================================
* 5. 色彩 —— 功能色（浅底 + 深字模式）
* ================================================================ */
--state-info-fg: #48698f; --state-info-bg: rgba(15, 72, 111, .06);
--state-success-fg: #13663d; --state-success-bg: rgba(31, 177, 113, .12);
--state-warn-fg: #7a5a14; --state-warn-bg: rgba(245, 185, 45, .16);
--state-error-fg: #9b2d2d; --state-error-bg: rgba(235, 82, 82, .12);
/* 费用胶囊 / 序号块等浅底色块 */
--chip-cost-fg: #20714a; --chip-cost-bg: #eef8f3; --chip-cost-bd: #caeabb;
--chip-step-bg: #eaf9fb; --chip-step-bd: #c4edf3;
/* ================================================================
* 6. 渐变
* 全站统一 135deg（唯一例外：Hero 遮罩用 90deg）
* ================================================================ */
--grad-primary: linear-gradient(135deg, var(--cyan), var(--blue));
--grad-success: linear-gradient(135deg, #22b77b, #1488c8);
--grad-brand: linear-gradient(135deg, #49d7e6, #2d8dff 58%, #6e63e6);
--grad-cover: linear-gradient(145deg, #e8f3f8, #f7fbfd);
/* ================================================================
* 7. 阴影（语义化命名）
* ================================================================ */
--shadow-flat: 0 1px 3px rgba(26, 26, 26, .10); /* 贴附：固定头部（旧式） */
--shadow-raise: 0 8px 20px rgba(31, 75, 110, .10); /* 浮层：下拉菜单 */
--shadow-card: 0 14px 36px rgba(31, 75, 110, .12); /* 卡片：默认 */
--shadow-panel: 0 14px 34px rgba(21, 55, 78, .08); /* 大面板：弱化投影 */
--shadow-hero: 0 18px 42px rgba(2, 12, 25, .32); /* 深色区强浮起：Hero 搜索框 */
--shadow-cta: 0 10px 24px rgba(21, 137, 212, .22); /* 主行动按钮（带品牌色） */
--shadow-cover: 0 10px 18px rgba(25, 54, 85, .18); /* 封面图 */
--shadow-fixed: 0 10px 30px rgba(2, 13, 29, .18); /* 固定头部（新式） */
--ring-focus: 0 0 0 3px rgba(37, 184, 219, .16); /* 键盘聚焦环 */
/* ================================================================
* 8. 圆角（8 容器 / 6 控件 / 5 媒体）
* ================================================================ */
--radius-container: 8px; /* 卡片、面板、弹窗 */
--radius-control: 6px; /* 按钮、输入框、徽章、状态条 */
--radius-media: 5px; /* 封面图等媒体元素 */
--radius-circle: 50%; /* 头像、圆形图标底 */
/* ================================================================
* 9. 排版
* ⚠️ 禁止 font-weight: 850（中文字体栈无此字重，会触发伪粗体）。
* ================================================================ */
--font-sans: "PingFang SC", "Lantinghei SC", "Microsoft Yahei",
"Hiragino Sans GB", "Microsoft Sans Serif",
"WenQuanYi Micro Hei", sans-serif;
--fs-xs: 11px; /* 徽章 */
--fs-sm: 12px; /* 辅助说明、卡片简介 */
--fs-base: 13px; /* Section Kicker、版权条 */
--fs-md: 14px; /* 正文默认 */
--fs-lg: 15px; /* 卡片标题、详情元数据 */
--fs-xl: 16px; /* 面板强调、导航 */
--fs-2xl: 18px; /* 折叠头、Hero 副文案 */
--fs-3xl: 20px; /* 搜索结果标题 */
--fs-4xl: 24px; /* Section 标题 */
--fs-5xl: 26px; /* 详情页 H1 */
--fs-6xl: 38px; /* Hero 标题 */
--fw-regular: 400;
--fw-medium: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;
--lh-tight: 1.18; /* 大标题 */
--lh-snug: 1.4; /* 卡片标题 */
--lh-normal: 1.55; /* 简介 */
--lh-relaxed: 1.75; /* 长正文 */
/* ================================================================
* 10. 间距（4px 基数）
* ================================================================ */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
--sp-9: 42px; /* 空状态专用 */
--gap-grid: var(--sp-4); /* 16px 卡片网格 */
--gap-grid-sm: var(--sp-3); /* 12px 移动端卡片网格 */
--gap-section: var(--sp-6); /* 24px 页脚等大区 */
--gutter: 15px; /* 容器左右安全边距 */
--container-max: 1240px;
/* ================================================================
* 11. 布局尺寸
* --header-h 是固定头部与内容区间距的单一来源，
* 头部各层高度与移动端 body padding-top 必须同源引用。
* ================================================================ */
--header-h: 78px; /* 桌面 */
--cover-w: 124px; /* 卡片封面 */
--cover-h: 188px;
--cover-w-thumb: 104px; /* 移动端横向卡片的封面列宽 */
/* ================================================================
* 12. 动效
* ⚠️ 使用时必须显式声明 transition-property，禁止裸写 transition: .3s
* ================================================================ */
--dur-fast: .18s; /* 微交互：聚焦环、hover */
--dur-base: .3s; /* 标准：面板展开、菜单滑入 */
--ease-standard: cubic-bezier(.4, 0, .2, 1);
}
/* ==================================================================
* 夜间模式（变量覆盖，供后续按需启用）
* ================================================================== */
body.night,
[data-theme="night"] {
--ink: #b9bbbe;
--muted: #8d9095;
--faint: #7c8087;
--line: #2c333c;
--soft: #232931;
--card: #2b333e;
--page-bg: #232931;
--cover-bg: #2b333e;
/* 深色底上品牌色需提亮，以下四值均已验证 ≥ 6.5:1 */
--blue-text: #6cb6e0;
--cyan-text: #60d8ea;
--green-text: #63c795;
--orange-text: #f0b45f;
--shadow-flat: 0 1px 3px rgba(0, 0, 0, .40);
--shadow-raise: 0 8px 20px rgba(0, 0, 0, .40);
--shadow-card: 0 12px 34px rgba(0, 0, 0, .32);
--shadow-panel: 0 14px 34px rgba(0, 0, 0, .28);
}
/* ==================================================================
* 断点级令牌覆盖
* ------------------------------------------------------------------
* 仅允许 6 种 @media 条件（min-width 768/992/1200 与
* max-width 767/991/1199 互补配对），跨断点尺寸一律在此覆盖变量。
* ================================================================== */
@media (max-width: 992px) {
:root {
--header-h: 62px;
--gutter: 15px;
}
}
@media (max-width: 767px) {
:root {
--gap-grid: var(--sp-3); /* 16px → 12px */
--gap-section: var(--sp-5); /* 24px → 20px */
--fs-6xl: 30px; /* Hero 标题降档 */
--fs-5xl: 22px; /* 详情页 H1 降档 */
--fs-4xl: 20px; /* Section 标题降档 */
}
}