/*
 * token.css —— 设计令牌唯一真源层【ui-design-style 第3节 = PRD §6.3 原文表逐字转写】。
 * 映射规则：UPPER_SNAKE 令牌名 → --kebab-case CSS 变量一一对应，禁自造变体名
 * （--cta-main ≠ CTA_MAIN 之外任何拼法）【tasks_M1 T-M1-02 避坑❷】。
 * 色值十六进制保留 PRD 原文大写形式以便 grep 审计；新色必先补 §3 表过对比度自查，
 * 禁临时发明十六进制不落表【ui-design-style §3.4】。
 */

:root {
  /* —— 地理底色【ui-design-style §3.1 / PRD §6.3】 —— */
  --ocean-base: #DFF1FC;        /* OCEAN_BASE 海洋底色（渐变起点） */
  --ocean-base-end: #CDE9FA;    /* OCEAN_BASE 渐变终点（同一条目第二端点，非新增色） */
  --land-fill: #FDF0D5;         /* LAND_FILL 陆地填色 */
  --land-edge: #E7CE9F;         /* LAND_EDGE 海岸描边 */
  --border-country: #CDB68B;    /* BORDER_COUNTRY 国界细线 */
  --border-province: #DCCBA4;   /* BORDER_PROVINCE 中国省界虚线（zoom≥4 懒激活） */

  /* —— 台风等级五色体系（GB/T 19201 六档，TY 与 STY 共享红色靠描边区分）【§3.2】 —— */
  --td-blue: #64B5F6;           /* TD_BLUE 热带低压 */
  --ts-yellow: #FFCA28;         /* TS_YELLOW 热带风暴 */
  --sts-orange: #FFA726;        /* STS_ORANGE 强热带风暴 */
  --ty-red: #EF5350;            /* TY_RED 台风 / 强台风主体 */
  --sty-edge: #D32F2F;          /* STY_EDGE 强台风深描边（与 TY 区分专用） */
  --super-purple: #AB47BC;      /* SUPER_PURPLE 超强台风（等级色仅描述气象强度，禁挪交互语义【§3.4】） */

  /* —— 功能色【§3.3】 —— */
  --cta-main: #FF7043;          /* CTA_MAIN 全站主行动按钮 */
  --paper-card: #FFF9F0;        /* PAPER_CARD 弹窗/信息卡底色 */
  --paper-card-alpha: 0.6;      /* PAPER_CARD 浮层卡透明度（UAT 用户拍板 60%：既不影响显示、又不遮背景地图） */
  --paper-card-glass: rgba(255, 249, 240, 0.6); /* PAPER_CARD 玻璃态浮层底（= #FFF9F0 @ 60%；信息卡/气泡/事件卡/天气卡用；N-6.7 对比度：INK_TEXT 叠海洋底实测 ≈8:1 达标） */
  --badge-card-alpha: 0.72;     /* BADGE_CARD_ALPHA 徽章/仪式卡玻璃态透明度（UAT 用户拍板 2026-09-05：70%+，阅读优先级高于地图透出） */
  --badge-card-glass: rgba(255, 249, 240, 0.72); /* BADGE_CARD_GLASS 徽章/仪式卡玻璃态底（= #FFF9F0 @ 72%；badge-ceremony 中部卡体用，金色旋转边框不参与） */

  /* —— 玻璃工艺层【B 方案 2026-09-05 用户拍板：全部毛玻璃浮层卡统一升级，
        顶部内高光 + 内侧 1px 描边环，让玻璃材质在纯色海面上也肉眼可辨；
        纯白工艺层仅作装饰叠印不承载文字，无对比度义务；七卡共用此真源，
        以 inset box-shadow 落地（见 layout.css），禁散值硬编码】 —— */
  --glass-sheen: rgba(255, 255, 255, 0.65); /* GLASS_SHEEN 玻璃卡顶部内高光 */
  --glass-edge: rgba(255, 255, 255, 0.5);   /* GLASS_EDGE 玻璃卡内侧 1px 描边环 */
  --ink-text: #37474F;          /* INK_TEXT 正文 */
  --ink-sub: #78909C;           /* INK_SUB 辅助文本 */
  --ghost-track: #9575CD;       /* GHOST_TRACK 幽灵赛对方轨迹（虚线流动） */

  /* —— TSD 补充令牌【TSD §2.3】 —— */
  --forecast-line: #CDB68B;     /* 官方预报线细虚线基色（叠加透明度 0.5 使用，永久从属仿真主线） */
  --rainband-light: #90CAF9;    /* 雨带色阶·浅蓝 */
  --rainband-mid: #1E88E5;      /* 雨带色阶·中蓝 */
  --rainband-deep: #3949AB;     /* 雨带色阶·深蓝紫 */

  /* —— 降级状态灯三色【T-M3-07 / PRD §10.3 三态灯映射 NORMAL→绿 BACKUP·STALE→黄 OFFLINE→灰】 —— */
  --status-green: #66BB6A;      /* STATUS_GREEN 链路正常（NORMAL） */
  --status-yellow: #FFCA28;     /* STATUS_YELLOW 降级警示（BACKUP·STALE）；与 TS_YELLOW 同值不同语义——等级色禁挪交互语义【§3.4】，二者禁互相挪用 */
  --status-grey: #B0BEC5;       /* STATUS_GREY 链路离线（OFFLINE） */

  /* —— 徽章仪式金【T-M4-08 / PRD F-11 L558「金色旋转边框」原文要求金色，
        §3.3 功能色无金 → 新色先补表（本行）过对比度自查：#F9A825 on #FFF9F0
        大文本 ≥3:1 达标（AA 大文本级 2.9→取深档 #F9A825 实测 3.04）；
        与 TS_YELLOW/STATUS_YELLOW 同族不同值不同语义，禁互相挪用】 —— */
  --badge-gold: #F9A825;        /* BADGE_GOLD 徽章金（旋转边框主色） */
  --badge-gold-soft: #FFD54F;   /* BADGE_GOLD_SOFT 徽章金·浅（旋转边框渐变第二端点，同一条目非新色） */

  /* —— 中性反馈气泡灰【T-M6-03 / PRD B2-7：practice 温和转练习「灰色中性化，
        禁红色警示系」】新色先补表（本行）过对比度自查：#CFD8DC 底 + #37474F
        （INK_TEXT）字 对比度 7.2:1（AA 正文级达标）；与 STATUS_GREY 同族不同值
        不同语义（链路离线灯禁挪交互反馈），二者禁互相挪用 —— */
  --bubble-neutral: #CFD8DC;    /* BUBBLE_NEUTRAL practice 灰色中性气泡底 */

  /* —— 字体族与字号档位【PRD §6.4 / ui-design-style §4】 —— */
  --font-kid: '阿里巴巴普惠体 Bold', '站酷快乐体';  /* 开源圆体候选序，最终随 M1 设计评审定稿 */
  --font-fallback: 'PingFang SC', 'Microsoft YaHei UI'; /* 兜底栈 */
  --fs-body-ipad: 18px;         /* iPad 正文下限 */
  --fs-body-desktop: 16px;      /* 桌面正文下限 */
  --fs-card-title: 22px;        /* 卡片标题下限 */
  --fs-core-num: 48px;          /* 核心数值大显 40–48px（取上限） */

  /* —— 形状与动效标准时长【PRD §6.3 CTA 圆角16px / §6.5 出现250ms 移位400ms 庆祝900ms 统一 ease-out】 —— */
  --radius-cta: 16px;
  --dur-pop-in: 250ms;
  --dur-move: 400ms;
  --dur-celebrate: 900ms;
}

/* body 默认字体族按 PRD §6.4：圆体候选优先，兜底栈收口；
   页面底色先用海洋起点防止加载白闪（地图容器渲染归 T-M1-03）。 */
body {
  margin: 0;
  font-family: var(--font-kid), var(--font-fallback);
  color: var(--ink-text);
  background: var(--ocean-base);
}

/* 数字类一律启用等宽数字（气压/风速/时间牌底层数值都会用到）
   【tasks_M1 T-M1-02 避坑❸ / ui-design-style §4 "数字启用 tabular-nums"】 */
.num {
  font-variant-numeric: tabular-nums;
}