/* ─────────────────────────────────────────────────────────────
   设计令牌 · Revolut 风格（消费级金融 App，不是 SaaS 后台）
   规则：所有颜色 / 字号 / 圆角 / 间距 / 动效一律引用这里的变量，禁止在别处写死 hex。
   深色为主视觉（纯黑底 + 悬浮卡片），浅色为同一套角色的另一组取值。
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ── 字体 ── 拉丁与数字走 Inter（带 opsz 光学尺寸轴），中文回落到系统黑体 */
  --font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei UI",
    "Microsoft YaHei", "Segoe UI", Roboto,
    sans-serif;
  --font-features: "cv11", "ss03", "calt"; /* 单层 a、圆润标点 */

  /* 字阶：size / line-height / weight / tracking */
  --fs-hero: clamp(44px, 10.5vw, 68px); /* 每个页面唯一的主数字 */
  --fs-display: clamp(30px, 6vw, 40px);
  --fs-title-1: 28px;
  --fs-title-2: 22px;
  --fs-title-3: 17px;
  --fs-body: 15px;
  --fs-sub: 13px;
  --fs-cap: 12px;
  --fs-micro: 11px;
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --track-hero: -0.04em;
  --track-title: -0.02em;
  --track-body: -0.006em;

  /* ── 圆角 ── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── 间距（4pt 网格）── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ── 布局 ── */
  --nav-w: 244px; /* 桌面侧栏 */
  --tabbar-h: 64px; /* 手机底部标签栏 */
  --topbar-h: 60px;
  --page-max: 1160px;
  --col-side: 372px;
  --gutter: 16px; /* 手机左右留白；≥720px 时 24px（见 base.css） */
  --row-h: 64px;
  --hit: 44px; /* 最小点击目标 */

  /* ── 动效 ── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 340ms;
  --dur-4: 520ms;

  /* ══ 浅色取值 ══ */
  --bg: #f4f5f7; /* 页面 */
  --surface: #ffffff; /* 卡片 */
  --surface-2: #eef0f3; /* 内嵌块 / 输入框 / 分段控件轨道 */
  --surface-3: #e4e7ec; /* hover / pressed */
  --overlay: rgba(12, 14, 17, 0.44); /* sheet 背后的遮罩 */
  --ink: #191c1f; /* 主文字 */
  --ink-2: #636d79; /* 次要文字（卡片上 5.2:1，页面底上 4.7:1） */
  --ink-3: #8a939e; /* 弱化文字 / 坐标轴（3.1:1，仅用于 ≥12px 非关键文字） */
  --ink-inverse: #ffffff;
  --line: rgba(25, 28, 31, 0.08); /* 发丝线 */
  --line-strong: rgba(25, 28, 31, 0.16);

  --accent: #4f55f1; /* Revolut 蓝紫 */
  --accent-hover: #4349d6;
  --accent-ink: #ffffff; /* accent 底上的文字 */
  --accent-text: #4349d6; /* 白底上当文字 / 图标用的 accent */
  --accent-soft: rgba(79, 85, 241, 0.1); /* 圆形图标底、选中态 */
  --accent-soft-2: rgba(79, 85, 241, 0.18);

  /* 状态色（保留语义：只表示好/坏/注意，永远配图标或文字，不当系列色用）*/
  --pos: #007d5c;
  --pos-soft: rgba(0, 168, 126, 0.12);
  --neg: #d92d3e;
  --neg-soft: rgba(226, 59, 74, 0.1);
  --warn: #b05a00;
  --warn-soft: rgba(236, 126, 0, 0.13);

  /* 图表分类色：固定顺序，按序分配，绝不循环；顺序本身就是色盲安全机制（已用 validator 验证）*/
  --series-1: #4f55f1; /* 靛 */
  --series-2: #e8730c; /* 橙 */
  --series-3: #00a87e; /* 青绿 */
  --series-4: #0ba5ec; /* 天蓝 */
  --series-5: #e950a4; /* 粉 */
  --series-6: #d9a400; /* 黄 */
  --series-muted: #c9ced6; /* “其他”/ 去强调 / 对照线 */
  /* 单色量级梯度（热力图等）：少 → 多 */
  --seq-0: #eceef2;
  --seq-1: #d9dbfc;
  --seq-2: #b3b6f9;
  --seq-3: #8a8ff6;
  --seq-4: #6267f3;
  --seq-5: #3b40c4;
  --chart-grid: #e9ebef; /* 实线发丝网格 */
  --chart-axis: #8a939e;

  /* Hero 背景光晕（页面顶部那团 Revolut 式渐变）*/
  --hero-glow: radial-gradient(120% 90% at 50% -10%, rgba(79, 85, 241, 0.2) 0%, rgba(233, 80, 164, 0.08) 38%, rgba(244, 245, 247, 0) 70%);
  --card-gradient: linear-gradient(135deg, #4f55f1 0%, #7a4df0 48%, #e950a4 100%); /* 只给“目标”这类庆祝型卡片用，克制 */

  --shadow-card: 0 0 0 1px rgba(25, 28, 31, 0.03), 0 1px 2px rgba(25, 28, 31, 0.04), 0 6px 20px -8px rgba(25, 28, 31, 0.08);
  --shadow-pop: 0 0 0 1px rgba(25, 28, 31, 0.05), 0 12px 40px -8px rgba(25, 28, 31, 0.22);
  --shadow-fab: 0 8px 24px -6px rgba(79, 85, 241, 0.55);
  --focus-ring: 0 0 0 3px rgba(79, 85, 241, 0.35);
}

/* ══ 深色取值 ══ 写两遍：跟随系统（未手动指定浅色时）+ 手动指定深色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --surface: #16181b;
    --surface-2: #202327;
    --surface-3: #2a2e33;
    --overlay: rgba(0, 0, 0, 0.62);
    --ink: #ffffff;
    --ink-2: #8b959e;
    --ink-3: #6a747e;
    --ink-inverse: #0b0c0e;
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);
    --accent: #5c62f5;
    --accent-hover: #6c72ff;
    --accent-ink: #ffffff;
    --accent-text: #8a8fff;
    --accent-soft: rgba(108, 114, 255, 0.16);
    --accent-soft-2: rgba(108, 114, 255, 0.26);
    --pos: #2ed3a2;
    --pos-soft: rgba(46, 211, 162, 0.14);
    --neg: #ff5c6c;
    --neg-soft: rgba(255, 92, 108, 0.14);
    --warn: #ffa23a;
    --warn-soft: rgba(255, 162, 58, 0.15);
    --series-1: #6c72ff;
    --series-2: #d9701a;
    --series-3: #0fa47b;
    --series-4: #1e94d2;
    --series-5: #db4e9c;
    --series-6: #ad8608;
    --series-muted: #3a3f46;
    --seq-0: #1d2024;
    --seq-1: #25284f;
    --seq-2: #33377f;
    --seq-3: #464bb4;
    --seq-4: #5c62ea;
    --seq-5: #9da1ff;
    --chart-grid: #22262a;
    --chart-axis: #6a747e;
    --hero-glow: radial-gradient(120% 90% at 50% -10%, rgba(92, 98, 245, 0.42) 0%, rgba(219, 78, 156, 0.14) 36%, rgba(0, 0, 0, 0) 70%);
    --shadow-card: none;
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 48px -8px rgba(0, 0, 0, 0.8);
    --shadow-fab: 0 8px 28px -6px rgba(92, 98, 245, 0.7);
    --focus-ring: 0 0 0 3px rgba(108, 114, 255, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #16181b;
  --surface-2: #202327;
  --surface-3: #2a2e33;
  --overlay: rgba(0, 0, 0, 0.62);
  --ink: #ffffff;
  --ink-2: #8b959e;
  --ink-3: #6a747e;
  --ink-inverse: #0b0c0e;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --accent: #5c62f5;
  --accent-hover: #6c72ff;
  --accent-ink: #ffffff;
  --accent-text: #8a8fff;
  --accent-soft: rgba(108, 114, 255, 0.16);
  --accent-soft-2: rgba(108, 114, 255, 0.26);
  --pos: #2ed3a2;
  --pos-soft: rgba(46, 211, 162, 0.14);
  --neg: #ff5c6c;
  --neg-soft: rgba(255, 92, 108, 0.14);
  --warn: #ffa23a;
  --warn-soft: rgba(255, 162, 58, 0.15);
  --series-1: #6c72ff;
  --series-2: #d9701a;
  --series-3: #0fa47b;
  --series-4: #1e94d2;
  --series-5: #db4e9c;
  --series-6: #ad8608;
  --series-muted: #3a3f46;
  --seq-0: #1d2024;
  --seq-1: #25284f;
  --seq-2: #33377f;
  --seq-3: #464bb4;
  --seq-4: #5c62ea;
  --seq-5: #9da1ff;
  --chart-grid: #22262a;
  --chart-axis: #6a747e;
  --hero-glow: radial-gradient(120% 90% at 50% -10%, rgba(92, 98, 245, 0.42) 0%, rgba(219, 78, 156, 0.14) 36%, rgba(0, 0, 0, 0) 70%);
  --shadow-card: none;
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 48px -8px rgba(0, 0, 0, 0.8);
  --shadow-fab: 0 8px 28px -6px rgba(92, 98, 245, 0.7);
  --focus-ring: 0 0 0 3px rgba(108, 114, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}