/* ============================================================================
   北极星 V3 · 设计令牌（F 定稿 · Polaris Aurora 深空极光 / 晨雾双主题）
   ----------------------------------------------------------------------------
   作者：designer · 2026-11-10
   用法：
     1) index.html 直接 <link> 本文件（在 base/components/motion 之前）；
     2) 主题：<html data-theme="dark"> / "light"（不设 = dark）；
     3) 所有组件禁止写死颜色/阴影/时长/圆角，一律引用本文件变量。
   设计依据：
     - 主视觉「极光星云」（D 组方案 A）：超大 radial-gradient 造柔光，无 filter:blur，
       动画只动 transform/opacity（合成层），滚动时暂停环境光（body.is-scrolling）。
     - 金色拆「填充金 / 文字金」两枚：深底上 #FFC94D 可做文字，浅底上必须换 #965F00。
     - 数据色（主/平/客/让球）与语义色（ok/warn/danger）分离，避免「红=好」的误读。
   零外部请求：无 @font-face、无图片（噪点是内联 SVG data URI）、无第三方库。
   ========================================================================== */

:root {
  /* ======================= 0. 色相基座（整体调色只改这里） ================== */
  --h-teal: 168;      /* 极光青绿 */
  --h-violet: 252;    /* 极光蓝紫 */
  --h-gold: 42;       /* 星芒金 */
  --h-blue: 220;      /* 数据蓝 */

  /* ======================= 1. 品牌 · 星芒金 ================================ */
  --brand: #ffc94d;                 /* 填充金：CTA / 品牌图标 / 关键数字 */
  --brand-2: #ffae2e;               /* 渐变深端 */
  --brand-hi: #ffe08a;              /* 渐变亮端（顶部受光） */
  --brand-text: #ffc94d;            /* 金色文字（深底 12.5:1） */
  --brand-ink: #2a1c00;             /* 金底上的文字 */
  --brand-soft: rgba(255, 201, 77, .14);
  --brand-softer: rgba(255, 201, 77, .07);
  --brand-line: rgba(255, 201, 77, .34);
  --brand-glow: rgba(255, 201, 77, .22);
  --brand-grad: linear-gradient(180deg, #ffe08a 0%, #ffc94d 46%, #ffae2e 100%);

  /* ======================= 2. 极光点缀（数据/装饰，非品牌主色） ============ */
  --aurora-teal: #2bd9c4;
  --aurora-teal-soft: rgba(43, 217, 196, .13);
  --aurora-teal-line: rgba(43, 217, 196, .30);
  --aurora-violet: #8c7cff;
  --aurora-violet-soft: rgba(140, 124, 255, .13);
  --aurora-violet-line: rgba(140, 124, 255, .30);
  --aurora-blue: #4d7cff;
  --aurora-blue-soft: rgba(77, 124, 255, .12);

  /* ======================= 3. 语义色 ====================================== */
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, .14);
  --ok-line: rgba(52, 211, 153, .32);
  --warn: #ffb74d;
  --warn-soft: rgba(255, 183, 77, .14);
  --warn-line: rgba(255, 183, 77, .32);
  --danger: #ff5f6d;
  --danger-soft: rgba(255, 95, 109, .14);
  --danger-line: rgba(255, 95, 109, .32);
  --info: #5b9dff;
  --info-soft: rgba(91, 157, 255, .14);
  --info-line: rgba(91, 157, 255, .32);

  /* ======================= 4. 数据色（图表/方向专用） ====================== */
  --data-a: #ff8f6b;                /* 主队 / 主胜（暖） */
  --data-b: #94a3b8;                /* 平局（中性） */
  --data-c: #5b9dff;                /* 客队 / 客胜（冷） */
  --data-d: #8c7cff;                /* 让球线 / 第四序列 */
  --data-up: #ff8f6b;               /* 数值上升 ▲（不表示好坏） */
  --data-down: #3ed6c0;             /* 数值下降 ▼（不表示好坏） */
  --data-grid: rgba(255, 255, 255, .07);
  --data-axis: rgba(255, 255, 255, .40);
  --data-fill-a: rgba(255, 143, 107, .18);
  --data-fill-b: rgba(255, 143, 107, 0);

  /* ======================= 5. 背景分层（深空） ============================= */
  --bg-0: #05070e;                  /* 页面最底（OLED 友好，非纯黑防色带） */
  --bg-1: #080d17;                  /* 渐层次层 */
  --bg-2: #0b1120;                  /* 卡片底 */
  --bg-3: #101829;                  /* 浮起卡片 / 输入框 */
  --bg-inset: rgba(0, 0, 0, .28);
  --scrim: rgba(3, 6, 13, .72);
  --page-grad:
    radial-gradient(120% 72% at 50% -10%, #101a33 0%, rgba(8, 13, 23, 0) 62%),
    linear-gradient(180deg, #080d17 0%, #05070e 58%, #04060c 100%);

  /* 极光层配色（背景专用，alpha 极低） */
  --aurora-1: rgba(43, 217, 196, .20);
  --aurora-2: rgba(140, 124, 255, .17);
  --aurora-3: rgba(255, 201, 77, .10);
  --aurora-4: rgba(77, 124, 255, .14);
  --vignette: radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, 0) 42%, rgba(2, 4, 9, .58) 100%);

  /* ======================= 6. 表面（玻璃/卡片面） ========================== */
  --surface-1: rgba(255, 255, 255, .040);
  --surface-2: rgba(255, 255, 255, .065);
  --surface-3: rgba(255, 255, 255, .095);
  --surface-glass: rgba(9, 14, 26, .72);
  --surface-blur: blur(18px) saturate(160%);
  --card-face: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .018) 100%);
  --card-face-flat: #0c1322;
  --card-border-grad: linear-gradient(160deg,
    rgba(255, 255, 255, .22) 0%,
    rgba(255, 255, 255, .06) 38%,
    rgba(255, 255, 255, .02) 62%,
    var(--brand-line) 100%);
  --card-border-aurora: linear-gradient(150deg,
    var(--aurora-teal-line) 0%,
    rgba(255, 255, 255, .05) 34%,
    rgba(255, 255, 255, .02) 66%,
    var(--aurora-violet-line) 100%);

  /* ======================= 7. 描边 / 分隔 ================================== */
  --line-1: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .11);
  --line-3: rgba(255, 255, 255, .17);
  --hairline-top: rgba(255, 255, 255, .10);
  --divider: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);

  /* ======================= 8. 阴影 / 光效 ================================== */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 6px 18px rgba(0, 0, 0, .32);
  --sh-3: 0 16px 44px rgba(0, 0, 0, .52);
  --sh-4: 0 28px 80px rgba(0, 0, 0, .62);
  --sh-brand: 0 8px 26px rgba(255, 201, 77, .22);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
  --glow-inner: inset 0 1px 0 rgba(255, 255, 255, .055), inset 0 0 32px rgba(255, 255, 255, .012);
  --glow-teal: 0 0 24px rgba(43, 217, 196, .18);
  --glow-violet: 0 0 24px rgba(140, 124, 255, .18);

  /* ======================= 9. 文字层级 ==================================== */
  --txt-0: #f3f6fc;   /* 标题/关键数字 17.4:1 */
  --txt-1: #aeb9ce;   /* 正文说明 9.6:1 */
  --txt-2: #7d89a2;   /* 次要信息 5.3:1 */
  --txt-3: #6e7a93;   /* 禁用/装饰 4.67:1（QA v3.1.2：11px 标注需 AA） */
  --txt-0-on-solid: #fff;
  --link: var(--aurora-teal);
  --txt-on-brand: var(--brand-ink);

  /* ======================= 10. 字体 ======================================= */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "MiSans", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 字阶（390 基准；15px 为阅读正文基准） */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px;
  --fs-17: 17px; --fs-20: 20px; --fs-26: 26px; --fs-34: 34px;
  /* 行高 */
  --lh-1: 1.2; --lh-2: 1.35; --lh-3: 1.5; --lh-4: 1.7;
  /* 字距（中文只加不减；数字/英文可微负） */
  --ls-cjk-title: .02em;
  --ls-cjk: .01em;
  --ls-num: -.01em;
  --ls-label: .08em;
  /* 字重（系统字体只有 400/500/600/700 可靠） */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ======================= 11. 圆角 ======================================= */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --r-xl: 22px; --r-2xl: 28px; --r-full: 999px;

  /* ======================= 12. 间距（8pt 栅格） ============================ */
  --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;
  --page-x: 14px;                   /* 页面左右内边距（390 宽下） */

  /* ======================= 13. 动效 ======================================= */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 320ms; --dur-5: 560ms;
  --dur-enter: 280ms;
  --stagger: 40ms;
  --stagger-max: 6;
  --ambient-1: 42s;
  --ambient-2: 64s;
  --breathe: 9s;

  /* ======================= 14. 布局 / 安全区 =============================== */
  --app-max: 560px;
  --topbar-h: 52px;
  --tabbar-h: 60px;
  /* ★ 安卓壳会覆盖为原生注入值；Web 用 env() 兜底。CSS 里一律写 var(--safe-t) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tap-min: 44px;

  /* ======================= 15. 层级 ======================================= */
  --z-bg: 0; --z-aurora: 1; --z-noise: 2; --z-content: 3;
  --z-sticky: 30; --z-tabbar: 35; --z-overlay: 60; --z-modal: 70;
  --z-toast: 80; --z-diag: 90;

  color-scheme: dark;
}

/* ==========================================================================
   浅色主题「晨雾」：暖白底 + 同族极光（更淡），卡片纯白
   切换：<html data-theme="light">
   规则：浅色下金色不能当文字（对比度 1.6:1），必须换 --brand-text(#965F00)；
        极光 alpha 一律降低（否则屏幕发脏），阴影更轻更冷。
   ========================================================================== */
:root[data-theme="light"] {
  --brand: #e8a317;
  --brand-2: #d08a06;
  --brand-hi: #f6b93b;
  --brand-text: #8a5600;      /* 5.45:1 on --brand-soft / 6.16 on #FFF（QA final P1：原 #965f00 在金色浅底 4.45，差 0.05） */
  --brand-ink: #3a2500;
  --brand-soft: rgba(232, 163, 23, .16);
  --brand-softer: rgba(232, 163, 23, .08);
  --brand-line: rgba(208, 138, 6, .34);
  --brand-glow: rgba(232, 163, 23, .26);
  --brand-grad: linear-gradient(180deg, #f6b93b 0%, #e8a317 55%, #d08a06 100%);

  --aurora-teal: #0f766e;
  --aurora-teal-soft: rgba(15, 118, 110, .10);
  --aurora-teal-line: rgba(15, 118, 110, .28);
  --aurora-violet: #6d28d9;
  --aurora-violet-soft: rgba(109, 40, 217, .10);
  --aurora-violet-line: rgba(109, 40, 217, .26);
  --aurora-blue: #1d4ed8;
  --aurora-blue-soft: rgba(29, 78, 216, .10);

  --ok: #15803d; --ok-soft: rgba(21, 128, 61, .10); --ok-line: rgba(21, 128, 61, .26);
  --warn: #92400e; --warn-soft: rgba(180, 83, 9, .10); --warn-line: rgba(180, 83, 9, .26);
  --danger: #c81e1e;      /* 5.35:1（QA：原 #dc2626 浅底 3.93） */
  --info: #1d4ed8; --info-soft: rgba(29, 78, 216, .09); --info-line: rgba(29, 78, 216, .24);

  --data-a: #c2410c;
  --data-b: #64748b;
  --data-c: #1d4ed8;
  --data-d: #6d28d9;
  --data-up: #c2410c;
  --data-down: #0f766e;
  --data-grid: rgba(15, 23, 42, .08);
  --data-axis: rgba(15, 23, 42, .48);
  --data-fill-a: rgba(194, 65, 12, .12);
  --data-fill-b: rgba(194, 65, 12, 0);

  --bg-0: #f5f7fb;
  --bg-1: #eef2f9;
  --bg-2: #ffffff;
  --bg-3: #ffffff;
  --bg-inset: rgba(15, 23, 42, .045);
  --scrim: rgba(15, 23, 42, .38);
  --page-grad:
    radial-gradient(120% 72% at 50% -10%, #e9f0fb 0%, rgba(245, 247, 251, 0) 60%),
    linear-gradient(180deg, #f7f9fd 0%, #f2f5fa 55%, #eef2f9 100%);

  --aurora-1: rgba(15, 118, 110, .09);
  --aurora-2: rgba(109, 40, 217, .07);
  --aurora-3: rgba(232, 163, 23, .09);
  --aurora-4: rgba(29, 78, 216, .06);
  --vignette: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0) 45%, rgba(226, 232, 242, .55) 100%);

  --surface-1: rgba(15, 23, 42, .030);
  --surface-2: rgba(15, 23, 42, .050);
  --surface-3: rgba(15, 23, 42, .080);
  --surface-glass: rgba(255, 255, 255, .78);
  --surface-blur: blur(20px) saturate(150%);
  --card-face: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .90) 100%);
  --card-face-flat: #ffffff;
  --card-border-grad: linear-gradient(160deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(15, 23, 42, .10) 45%,
    var(--brand-line) 100%);
  --card-border-aurora: linear-gradient(150deg,
    var(--aurora-teal-line) 0%,
    rgba(15, 23, 42, .06) 45%,
    var(--aurora-violet-line) 100%);

  --line-1: rgba(15, 23, 42, .075);
  --line-2: rgba(15, 23, 42, .115);
  --line-3: rgba(15, 23, 42, .18);
  --hairline-top: rgba(255, 255, 255, .95);
  --divider: linear-gradient(90deg, transparent, rgba(15, 23, 42, .12), transparent);

  --sh-1: 0 1px 2px rgba(15, 23, 42, .06);
  --sh-2: 0 4px 14px rgba(15, 23, 42, .075);
  --sh-3: 0 14px 40px rgba(15, 23, 42, .11);
  --sh-4: 0 26px 70px rgba(15, 23, 42, .16);
  --sh-brand: 0 8px 24px rgba(232, 163, 23, .22);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .9);
  --glow-inner: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(15, 23, 42, .02);
  --glow-teal: 0 0 24px rgba(15, 118, 110, .12);
  --glow-violet: 0 0 24px rgba(109, 40, 217, .12);

  --txt-0: #0d1526;   /* 16.2:1 */
  --txt-1: #44526b;   /* 8.1:1 */
  --txt-2: #5e6c86;   /* 4.94:1（QA 修正：原 #66748e 4.40 不达 AA） */
  --txt-3: #5e6b84;   /* 4.9:1（QA：原 #98a2b6 仅 2.39，浅色标注必须可读；禁用态另用 opacity） */
  --txt-0-on-solid: #0d1526;
  --link: var(--aurora-teal);
  --txt-on-brand: var(--brand-ink);

  color-scheme: light;
}

/* ==========================================================================
   阅读器字号/行距档位（报告页工具条切换；localStorage 记忆由 JS 负责）
   fs: 1=13px 2=15px(默认) 3=17px 4=19px；lh: 1=紧(1.6) 2=松(1.8)
   ========================================================================== */
:root {
  --read-fs: 15px;
  --read-lh: 1.72;
}
[data-read="fs-1"] { --read-fs: 13px; }
[data-read="fs-2"] { --read-fs: 15px; }
[data-read="fs-3"] { --read-fs: 17px; }
[data-read="fs-4"] { --read-fs: 19px; }
[data-read="lh-1"] { --read-lh: 1.6; }
[data-read="lh-2"] { --read-lh: 1.8; }

/* ==========================================================================
   减少动效：令牌级归零 + 组件级兜底（组件里再写一次 prefers-reduced-motion）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms;
    --stagger: 0ms;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   兼容别名（地基占位页 / app.js 生成标记仍在使用旧变量名，保留避免闪坏）
   真正页面请只用上面的语义 token。
   ========================================================================== */
:root {
  --bg: var(--bg-0);
  --surface: var(--surface-1);
  --line: var(--line-1);
  --text: var(--txt-0);
  --text-2: var(--txt-1);
  --text-3: var(--txt-2);
  --text-inv: var(--bg-0);
  --sp-1: var(--s-1); --sp-2: var(--s-2); --sp-3: var(--s-3); --sp-4: var(--s-4);
  --sp-5: var(--s-5); --sp-6: var(--s-6); --sp-8: var(--s-7); --sp-10: var(--s-8);
  --r-pill: var(--r-full);
  --ease: var(--ease-out);
  --shadow-1: var(--sh-1);
  --shadow-2: var(--sh-2);
  --glow-brand: var(--sh-brand);
  --z-topbar: var(--z-sticky);
  --z-sheet: var(--z-modal);
}