/* EquationNews 网站 · 共用基础样式（字体、色板、重置）
 * 配色（2026-10-16 改版，用户要求「不用纯黑白、适当加颜色」）：
 *   - 中性色用带一点冷色相的石板灰；页面底色 --canvas 比卡片 --bg 深一档，内容放在白卡片上。
 *   - 品牌主色「灰蓝」--ac：链接、选中态、主按钮、焦点框、实时状态，全站（含 API 两页）统一这一个主色。logo 仍只用黑白。
 *     （2026-10-16 第二次换色：用户不要偏紫的 #3451E6，也不要 API 页单独配色；色值只在下面 --eq-accent* 三个变量里改）
 *   - 橙色 --hot 只做提醒小标记：频道「刚有新消息」的脉冲点、历史事件前三名（不用红 / 绿，免得和涨跌色混淆）。
 *   - 频道四组各有一个识别色 --cg-main / list / mkt / feed（主频道 = 主色、上新与公告 = 紫、行情异动 = 青、推文与宏观 = 琥珀）。
 *   - 涨跌色只表示价格方向，默认绿涨红跌，data-updown="cn" 切换为红涨绿跌。
 * 所有文字色在对应底色上 ≥ 4.5:1（小号辅助字 --fg-3 白底 4.97、卡片深底 5.94）。
 */

/* ---------- 字体（OFL，见 _kit/build_fonts.py；中文为子集，缺字自动回落到系统字体） ---------- */
@font-face { font-family: "EQ Grotesk"; src: url("fonts/SpaceGrotesk-VF.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "EQ Inter"; src: url("fonts/Inter-VF.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "EQ Mono"; src: url("fonts/JetBrainsMono-VF.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "EQ Sans SC"; src: url("fonts/NotoSansSC-VF-subset.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* 快讯正文的西文（用户 10-23 定，和分享卡片英文行同一款）：Source Serif 4（Adobe，OFL），拉丁 + 拉丁扩展 + 西里尔子集，带 opsz / wght 轴 */
@font-face { font-family: "EQ Serif"; src: url("fonts/SourceSerif4-VF.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  /* 字体栈：拉丁字母在前，中文字体紧随其后（逐字回落），再接系统中文字体 */
  --eq-font-sans: "EQ Inter", "EQ Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --eq-font-display: "EQ Grotesk", "EQ Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --eq-font-mono: "EQ Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "EQ Sans SC", monospace;
  /* 快讯正文：西文 Source Serif 4，中文仍是思源黑体（逐字回落）；界面文字 / 数字 / 结构化数据不用它 */
  --eq-font-text: "EQ Serif", "EQ Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Georgia, serif;

  /* 中性色（冷灰） */
  --eq-n0: #FFFFFF;
  --eq-n25: #FAFBFD;
  --eq-n50: #F4F6FA;
  --eq-n100: #EEF1F6;
  --eq-n150: #E4E8EF;
  --eq-n200: #D3DAE4;
  --eq-n300: #B8C1CF;
  --eq-n400: #8B95A7;
  --eq-n500: #667085;   /* 白底上的最浅可读辅助文字（4.97:1） */
  --eq-n600: #4D5668;
  --eq-n700: #353C4B;
  --eq-n800: #222833;
  --eq-n850: #18202D;
  --eq-n900: #121722;
  --eq-n950: #0B0E14;

  /* 品牌主色「灰蓝」与强调色 */
  --eq-accent: #406282;     /* 浅底填充 / 文字：白底 6.39:1，白字 6.39:1，主色浅底上 5.63:1 */
  --eq-accent-d: #A2BED7;   /* 深底文字：9.29:1 */
  --eq-accent-df: #4D779D;  /* 深底上的填充（白字 4.73:1） */
  --eq-orange: #C2410C;   /* 提醒橙：白底 5.18:1，白字 5.18:1 */
  --eq-orange-d: #FF8A4C;
  --eq-violet: #7C3AED;   --eq-violet-d: #B79CFF;
  --eq-cyan: #0E7490;     --eq-cyan-d: #4CC9E0;
  --eq-amber: #A34A07;    --eq-amber-d: #F2B35B;

  /* 涨跌色：只用于价格方向。默认「绿涨红跌」（国际与币安默认） */
  --eq-green: #1A7F37;   /* 白底 5.1:1 */
  --eq-red: #CF222E;     /* 白底 5.4:1 */
  --eq-green-d: #3FB950; /* 深底 */
  --eq-red-d: #F85149;
  --eq-up: var(--eq-green);
  --eq-down: var(--eq-red);

  /* 语义变量（浅色默认） */
  --canvas: var(--eq-n50);       /* 页面底色 */
  --bg: var(--eq-n0);            /* 卡片 / 面板底色（组件默认铺在卡片上） */
  --bg-2: var(--eq-n25);
  --surface: var(--eq-n0);
  --surface-2: var(--eq-n25);    /* 悬停 */
  --surface-3: var(--eq-n100);   /* 芯片 / 输入框 / 分段控件轨道 */
  --fg: #111723;
  --fg-2: var(--eq-n600);
  --fg-3: var(--eq-n500);
  --line: var(--eq-n150);        /* 分隔线 */
  --line-2: var(--eq-n200);      /* 控件描边 */
  --line-strong: var(--eq-n700);
  --invert-bg: var(--eq-n900);   /* 提示条、跳转链接等小面积深色件 */
  --invert-fg: var(--eq-n0);
  --flash: color-mix(in srgb, var(--eq-accent) 9%, var(--bg));   /* 新消息到达时的闪烁底色 */

  --ac: var(--eq-accent);          /* 主色填充 */
  --ac-fg: #FFFFFF;              /* 主色上的文字 */
  --ac-text: var(--eq-accent);     /* 主色文字 / 链接 */
  --ac-soft: color-mix(in srgb, var(--eq-accent) 9%, var(--bg));
  --ac-line: color-mix(in srgb, var(--eq-accent) 32%, var(--bg));
  --hot: var(--eq-orange);
  --hot-text: #B43C0B;          /* 橙色浅底上的文字：比填充色深一档，保证 ≥ 4.5:1 */
  --hot-soft: color-mix(in srgb, var(--eq-orange) 10%, var(--bg));
  --cg-main: var(--eq-accent);
  --cg-list: var(--eq-violet);
  --cg-mkt: var(--eq-cyan);
  --cg-feed: var(--eq-amber);

  /* 尺寸与阴影 */
  --eq-radius: 6px;              /* 按钮、输入框、标签 */
  --eq-radius-lg: 12px;          /* 卡片 */
  --eq-radius-xl: 16px;          /* 弹层 */
  --eq-maxw: 1320px;
  --eq-ease: cubic-bezier(.2, .7, .2, 1);
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px -4px rgba(16, 24, 40, .08);
  --sh-3: 0 2px 6px rgba(16, 24, 40, .06), 0 16px 40px -8px rgba(16, 24, 40, .18);
}

[data-theme="dark"] {
  /* 深色分层：页面 → 卡片 → 悬停 → 芯片，四级蓝灰 */
  --canvas: var(--eq-n950);
  --bg: var(--eq-n900);
  --bg-2: #141A26;
  --surface: var(--eq-n900);
  --surface-2: var(--eq-n850);
  --surface-3: #212A3A;
  --fg: #E6EAF2;
  --fg-2: #A9B2C3;
  --fg-3: var(--eq-n400);        /* 卡片底上 5.94:1 */
  --line: #252E40;
  --line-2: #334056;
  --line-strong: #C9D1DE;
  --invert-bg: #E6EAF2;
  --invert-fg: var(--eq-n900);
  --flash: color-mix(in srgb, var(--eq-accent-d) 12%, var(--bg));
  --ac: var(--eq-accent-df);
  --ac-text: var(--eq-accent-d);
  --ac-soft: color-mix(in srgb, var(--eq-accent-d) 13%, var(--bg));
  --ac-line: color-mix(in srgb, var(--eq-accent-d) 38%, var(--bg));
  --hot-text: var(--eq-orange-d);
  --hot-soft: color-mix(in srgb, var(--eq-orange-d) 13%, var(--bg));
  --cg-main: var(--eq-accent-d);
  --cg-list: var(--eq-violet-d);
  --cg-mkt: var(--eq-cyan-d);
  --cg-feed: var(--eq-amber-d);
  --eq-up: var(--eq-green-d);
  --eq-down: var(--eq-red-d);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -6px rgba(0, 0, 0, .45);
  --sh-3: 0 2px 8px rgba(0, 0, 0, .4), 0 20px 48px -8px rgba(0, 0, 0, .6);
}

[data-updown="cn"] { --eq-up: var(--eq-red); --eq-down: var(--eq-green); }
[data-theme="dark"][data-updown="cn"] { --eq-up: var(--eq-red-d); --eq-down: var(--eq-green-d); }

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--fg);
  font-family: var(--eq-font-sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ---------- 小工具 ---------- */
.eq-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero" 0; }
.eq-mono { font-family: var(--eq-font-mono); font-variant-numeric: tabular-nums; }
.eq-up { color: var(--eq-up); }
.eq-down { color: var(--eq-down); }
.eq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eq-logo { display: inline-block; vertical-align: middle; color: currentColor; }
.eq-logo svg { height: 100%; width: auto; }

@keyframes eq-flash { from { background: var(--flash); } to { background: transparent; } }
.eq-new { animation: eq-flash 2.4s var(--eq-ease); }
@keyframes eq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.eq-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: eq-pulse 1.6s infinite; }

@media (prefers-reduced-motion: reduce) {
  .eq-new, .eq-live-dot { animation: none; }
}