/* ==========================================================================
   fintech101.org · 设计令牌 (tokens.css)
   唯一的取值来源。base.css 与各子页面只准引用这里的变量，不得写死颜色和字号。
   用法：<link rel="stylesheet" href="/assets/ui/tokens.css"> 放在 base.css 之前。
   ========================================================================== */

:root {
  /* ---- 字体 ---------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- 字号阶梯（移动端基准，桌面端在媒体查询里放大）------------------ */
  --fs-hero: 30px;      /* 页面主标题，每页只出现一次 */
  --fs-h2: 20px;        /* 区块标题 */
  --fs-h3: 16px;        /* 卡片标题 */
  --fs-body: 15px;      /* 正文 */
  --fs-small: 13px;     /* 次要说明 */
  --fs-label: 11.5px;   /* 等宽小标签，大写加字距 */
  --fs-metric: 28px;    /* 主指标数字 */
  --fs-metric-sm: 17px; /* 次级指标数字 */

  --lh-tight: 1.25;
  --lh-body: 1.65;      /* 中文正文，不要低于 1.6 */

  /* ---- 间距（4 的倍数，只用这七档）------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --pad-card: var(--sp-4);   /* 卡片内距，桌面端放大到 20px */
  --gutter: var(--sp-4);     /* 页面左右最小留白 */
  --maxw: 1120px;

  /* ---- 圆角与阴影（各只有两档）---------------------------------------- */
  --radius-sm: 4px;   /* 芯片、输入框、徽章 */
  --radius-md: 6px;   /* 卡片 */
  --radius-lg: 8px;   /* 大区块面板 */
  --shadow: 0 1px 3px rgba(17, 22, 36, 0.07);
  --shadow-raised: 0 4px 14px rgba(17, 22, 36, 0.10); /* 仅吸顶条与弹层 */

  /* ---- 中性色 --------------------------------------------------------- */
  --ground: #F2F4F8;      /* 页面底色 */
  --surface: #FFFFFF;     /* 卡片 */
  --surface-2: #F6F8FB;   /* 卡片内的次级块 */
  --surface-3: #EBEEF4;   /* 表头、禁用态 */
  --ink: #111624;         /* 正文 */
  --muted: #5A6478;       /* 次要文字，对比度仍达 AA */
  --rule: #D4D9E2;        /* 分隔线、边框 */
  --rule-light: #E5E9F0;

  /* ---- 语义色：全站只有这四种，不得新增 -------------------------------- */
  /* 蓝 = 可交互 / 当前选中 */
  --blue: #1A3F8B;
  --blue-soft: #E6ECF8;
  --blue-ink: #0F2758;
  /* 红 = 损失 / 扣费 / 阻断 */
  --red: #C02B24;
  --red-soft: #FBE9E7;
  --red-ink: #7F1712;
  /* 绿 = 到账 / 达成 */
  --green: #1E763D;
  --green-soft: #E2F2E7;
  --green-ink: #0F4220;
  /* 琥珀 = 合规提示 / 阈值触发（只用于监管相关，不当第二强调色）*/
  --amber: #8A5A00;
  --amber-soft: #FDF1D8;
  --amber-ink: #573700;

  /* 兼容别名映射 (用于平滑迁移历史代码) */
  --display: var(--font-display);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --shadow-sm: var(--shadow);
  --ok: var(--green);
  --ok-soft: var(--green-soft);
  --ok-ink: var(--green-ink);
  --warn: var(--amber);
  --warn-soft: var(--amber-soft);
  --warn-ink: var(--amber-ink);

  /* 航空信封条纹，只用于页面顶部那一条 */
  --stripe-red: #C02B24;
  --stripe-blue: #1A3F8B;

  --focus-ring: 2px solid var(--blue);
  --motion: 160ms cubic-bezier(.2, .6, .3, 1);
}

/* 桌面端放大一档 */
@media (min-width: 768px) {
  :root {
    --fs-hero: 40px;
    --fs-h2: 24px;
    --fs-h3: 17px;
    --fs-body: 15.5px;
    --fs-metric: 34px;
    --fs-metric-sm: 19px;
    --pad-card: 20px;
  }
}

/* ---- 深色模式：只重定义取值，不新增变量 -------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1117;
    --surface: #161A23;
    --surface-2: #1C212C;
    --surface-3: #232937;
    --ink: #E6E9F0;
    --muted: #9AA3B5;
    --rule: #2E3546;
    --rule-light: #242A38;

    --blue: #8FA9E0;
    --blue-soft: #1C2946;
    --blue-ink: #CBD8F5;
    --red: #F0887A;
    --red-soft: #3A1D19;
    --red-ink: #FFC9BF;
    --green: #7CC69A;
    --green-soft: #16301F;
    --green-ink: #BFE8CE;
    --amber: #E0B252;
    --amber-soft: #33280F;
    --amber-ink: #F6DFA8;

    --stripe-red: #A8342C;
    --stripe-blue: #2A4A8F;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-raised: 0 4px 14px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --ground: #0E1117;
  --surface: #161A23;
  --surface-2: #1C212C;
  --surface-3: #232937;
  --ink: #E6E9F0;
  --muted: #9AA3B5;
  --rule: #2E3546;
  --rule-light: #242A38;

  --blue: #8FA9E0;
  --blue-soft: #1C2946;
  --blue-ink: #CBD8F5;
  --red: #F0887A;
  --red-soft: #3A1D19;
  --red-ink: #FFC9BF;
  --green: #7CC69A;
  --green-soft: #16301F;
  --green-ink: #BFE8CE;
  --amber: #E0B252;
  --amber-soft: #33280F;
  --amber-ink: #F6DFA8;

  --stripe-red: #A8342C;
  --stripe-blue: #2A4A8F;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 4px 14px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   基础元素
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 var(--gutter);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: var(--lh-tight); text-wrap: balance; }
h1 { font-size: var(--fs-hero); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; font-family: var(--font-sans); }
p  { margin: 0 0 var(--sp-3); max-width: 68ch; }

a { color: var(--blue); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* 所有数字一律等宽并对齐 */
.num, .mono, td.num, .metric-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 等宽小标签：区块眉题、字段名 */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 页面容器 */
.wrap { max-width: var(--maxw); margin: 0 auto; display: grid; gap: var(--sp-5); }

/* 卡片：全站唯一的容器样式 */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--pad-card);
}
.card--panel { border-radius: var(--radius-lg); }

/* 航空信封条纹：整站只出现在页面顶部 */
.airmail-stripe {
  height: 8px;
  background: repeating-linear-gradient(-45deg,
    var(--stripe-red) 0 14px, var(--surface) 14px 22px,
    var(--stripe-blue) 22px 36px, var(--surface) 36px 44px);
}

/* 提示条：只有这四种，对应四个语义色 */
.callout { border-left: 3px solid var(--rule); background: var(--surface-2); padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.callout--loss     { border-color: var(--red);   background: var(--red-soft);   color: var(--red-ink); }
.callout--success  { border-color: var(--green); background: var(--green-soft); color: var(--green-ink); }
.callout--rule     { border-color: var(--amber); background: var(--amber-soft); color: var(--amber-ink); }

/* 术语：虚下划线，悬停出释义 */
.term { border-bottom: 1px dotted var(--muted); cursor: help; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}