/* ══════════════════════════════════════════════════════════════
   灵境OZON 官网 · 晨雾极光设计令牌 v3（浅色）

   上一版是「深色影院感」：深空底 + 极光辉光 + 玻璃面板。
   这一版整个翻成浅色：暖白纸感的底、大团低饱和的柔彩光斑
   （天蓝 / 薄紫 / 蜜桃）、磨砂白玻璃卡、一个站得住的强调蓝。
   底子柔和，动效张扬 —— 但任何效果都不能压过内容的可读性。

   命名沿用 tokens-dark.css 的结构（--bg- / --fg- / --t- / --s- 各族），
   site.css 里的引用基本不用改名。方向样稿：tmp/styles/aurora.html。
   （注释里绝不能让星号紧挨着斜杠 —— 上一稿把带星号的令牌族名
   用斜杠连着排，等于提前写出了注释收口符，第一个 :root 整块被吃掉。）

   中文排版铁律：负字距全部归零（汉字等宽字身框，负字距会把
   本就只有 3–5% 的边空吃光）；数字一律 tabular-nums。
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── 底色阶梯 ───────────────────────────────────────────────
     浅色站的「抬起」方向和深色相反：底是暖白纸，越浮起越白。
     --void 在这套里是「微冷白」，承担区块地面交替的另一极 ——
     暖白 #FAFAF8 vs 微冷白 #F1F3F7，高亮度区 4% 的差人眼看得见，
     不需要再靠辉光去救接缝。 */
  --void:      #F1F3F7;   /* 微冷白：交替段的地面 */
  --seam-lift: rgba(126, 186, 233, .12);  /* 区块顶部的换气柔光，浅色版走天蓝 */
  --bg-0:      #FAFAF8;   /* 页面底：暖白纸 */
  --bg-1:      #FDFDFC;   /* 抬起一级 */
  --bg-2:      #FFFFFF;   /* 抬起两级：卡片的实底（玻璃卡在 site.css 里换成半透明渐变） */
  --bg-3:      #EFF2F7;   /* 卡片内的嵌套面 / 小 chip */
  --bg-hover:  #F4F7FB;

  /* 玻璃面板：白玻璃。透明度不能再低了 —— 再低文字压不住背后的光斑 */
  --glass:       rgba(255, 255, 255, .60);
  --glass-light: rgba(255, 255, 255, .46);
  --glass-edge:  rgba(255, 255, 255, .78);

  /* ── 描边 ────────────────────────────────────────────────
     浅色底上用墨色低透明度：跟着背后的底色一起变，
     不会在光斑上留下一圈死线。 */
  --line-1: rgba(38, 40, 46, .08);
  --line-2: rgba(38, 40, 46, .13);
  --line-3: rgba(38, 40, 46, .22);

  /* ── 文字 ────────────────────────────────────────────────
     全部按 #FAFAF8 底实测过对比度：
     fg-0 ≈ 13.9:1，fg-1 ≈ 10.1:1，fg-2 ≈ 6.4:1，fg-3 ≈ 5.1:1。
     最小的 fg-3 也过 AA（4.5:1），小灰字不例外。 */
  --fg-0: #24272E;   /* 标题墨 */
  --fg-1: #3A3F47;   /* 正文 */
  --fg-2: #565C66;   /* 次要 */
  --fg-3: #656B74;   /* 更次要 / 占位 */

  /* 强调色实底上的文字。深色版直接用 --fg-0（近白），浅色版
     --fg-0 是墨色，压在蓝底上会糊 —— 单独给一个名字。 */
  --on-accent: #FFFFFF;

  /* ── 主色 ────────────────────────────────────────────────
     晨雾里的强调蓝。白字压 #1D6FB5 是 5.3:1、压 #155A96 是 7.2:1，
     按钮文字全档达标。 */
  --brand:      #1D6FB5;
  --brand-lift: #16639F;   /* 浅色底上做链接色，6.4:1 */
  --brand-deep: #155A96;
  --brand-dim:  rgba(29, 111, 181, .14);
  --brand-ghost: rgba(29, 111, 181, .07);

  /* 光斑三色：天蓝 / 薄紫 / 蜜桃。只出现在光斑、渐变和辉光里，
     不做实色文字，不做实色面。--violet/--cyan 沿用深色版的名字，
     好让 site.css 里既有的引用直接落到新色上。 */
  --sky:    #7EBAE9;
  --lilac:  #C9B8F2;
  --peach:  #F5C6A8;
  --violet: var(--lilac);
  --cyan:   var(--sky);
  --pink:   var(--peach);

  /* ── 语义色（浅色底上压深，正文级对比全部 ≥4.8:1）────── */
  --ok:    #1F7A47;
  --ok-dim: rgba(31, 122, 71, .13);
  --warn:  #8A5A00;
  --warn-dim: rgba(180, 122, 0, .14);
  --bad:   #BE3A54;
  --bad-dim: rgba(190, 58, 84, .12);

  /* 利润条五段（浅色可辨的一组灰 + 收益绿） */
  --seg-purchase: #B8BEC9;
  --seg-express:  #A6ADBA;
  --seg-freight:  #949CAB;
  --seg-fee:      #828B9C;
  --seg-profit:   var(--ok);

  /* ── 渐变 ────────────────────────────────────────────────
     晨雾：三团低饱和的柔彩光斑。渐变自身从色到透明，
     不需要 filter: blur —— 一样柔，代价为零。 */
  --aurora-1: radial-gradient(60% 60% at 20% 10%, rgba(126, 186, 233, .40), transparent 70%);
  --aurora-2: radial-gradient(50% 50% at 80% 0%, rgba(201, 184, 242, .36), transparent 70%);
  --aurora-3: radial-gradient(70% 50% at 50% 100%, rgba(245, 198, 168, .28), transparent 70%);

  /* 标题渐变文字：墨色滑向雾蓝，高光落在句尾。 */
  --grad-text: linear-gradient(118deg, #1F2127 30%, #2A4A6E 78%, #556A9E 100%);
  /* 卡片顶部的彩线：天蓝 → 薄紫 → 蜜桃 */
  --grad-line: linear-gradient(100deg, rgba(126, 186, 233, .80), rgba(201, 184, 242, .60) 45%, rgba(245, 198, 168, .40) 80%);
  /* 卡片描边 hairline：光斑三色的极淡渐变（静态）与点亮版（hover）。
     样稿 plus-bento 的组件语言：静态环走 mask-composite 抠出的 1px 环，
     hover 时点亮版以 opacity 淡入 —— 渐变本身不能过渡，叠两层能。 */
  --grad-hair: linear-gradient(135deg, rgba(126, 186, 233, .55), rgba(201, 184, 242, .40) 46%, rgba(245, 198, 168, .38) 82%, rgba(126, 186, 233, .30));
  --grad-hair-hot: linear-gradient(135deg, rgba(126, 186, 233, .95), rgba(201, 184, 242, .85) 46%, rgba(245, 198, 168, .80) 82%, rgba(126, 186, 233, .70));
  /* 主按钮：强调蓝，顶浅底深。白字顶 5.3:1、底 7.2:1。 */
  --grad-btn: linear-gradient(180deg, #1D6FB5 0%, #155A96 100%);

  /* ── 渐变墨关键词（C 包）──────────────────────────────
     光斑三色的「深化墨」：同色相压暗到能给正文级文字上色的深度
     （plus-type 样稿的现成值，#FAFAF8 底上全部 ≥4.5:1 过 AA）。
     一句话只准亮一处；暖色一对留给核价关卡的否决句。 */
  --ink-sky:        #2B6FA8;
  --ink-lilac:      #6C51B8;
  --ink-peach:      #A85F27;
  --ink-peach-deep: #8F4E1D;
  --grad-k:      linear-gradient(118deg, var(--ink-sky) 8%, var(--ink-lilac) 92%);
  --grad-k-warm: linear-gradient(118deg, var(--ink-peach-deep) 10%, var(--ink-peach) 90%);

  /* 网格底纹：墨色极低透明度，配 mask 从中心淡出 */
  --grid-line: rgba(38, 40, 46, .045);
  --grid-size: 64px;

  /* ── 阴影与辉光 ──────────────────────────────────────────
     浅色底上景深靠「大半径低透明的蓝灰阴影 + 内侧白高光」。
     纯黑阴影会显脏，一律带蓝灰调（46,68,110）。 */
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, .85);
  --glow-brand: 0 0 0 1px rgba(29, 111, 181, .18), 0 8px 24px -10px rgba(29, 111, 181, .50);
  --glow-soft:  0 18px 44px -18px rgba(70, 100, 140, .35);
  --shadow-1: 0 1px 2px rgba(46, 68, 110, .06), 0 6px 18px -8px rgba(46, 68, 110, .14);
  --shadow-2: 0 10px 28px -12px rgba(46, 68, 110, .20), 0 30px 64px -30px rgba(46, 68, 110, .18);
  --shadow-3: 0 60px 110px -34px rgba(46, 68, 110, .42), 0 24px 48px -24px rgba(46, 68, 110, .30);

  /* ── 字体 ──────────────────────────────────────────────── */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num:  "SF Mono", ui-monospace, "Cascadia Mono", "Roboto Mono",
               Consolas, Menlo, monospace;

  --w-light:  300;
  --w-normal: 400;
  --w-mid:    500;
  --w-bold:   600;
  --w-heavy:  700;

  /* ── 字号阶梯（1440 基准）──────────────────────────────
     字号档位与深色版一致；**负字距全部归零** ——
     汉字等宽字身框，负字距会把仅有的边空吃光（在深色版上
     实测踩过：−0.035em 时「的商品」三个字贴在一起）。
     浅色底墨字没有光晕扩张，行距可以比深色版略收，但不冒险，照旧。 */
  --t-mega:    84px;  --lh-mega:    1.08;  --ls-mega:    0;
  --t-display: 60px;  --lh-display: 1.08;  --ls-display: 0;
  --t-h2:      40px;  --lh-h2:      1.18;  --ls-h2:      0;
  --t-h3:      24px;  --lh-h3:      1.35;  --ls-h3:      0;
  --t-lead:    19px;  --lh-lead:    1.62;  --ls-lead:    0;
  --t-body:    16px;  --lh-body:    1.70;  --ls-body:    0;
  --t-sm:      14px;  --lh-sm:      1.60;  --ls-sm:      0;
  --t-label:   13px;  --lh-label:   1.45;  --ls-label:   0.06em;
  --t-micro:   12px;  --lh-micro:   1.50;  --ls-micro:   0.02em;

  --n-hero: 56px;
  --ls-num: 0;

  /* ── 间距 ──────────────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  --container: 1240px;
  --container-wide: 1440px;
  --page-pad: 40px;
  --gutter: 24px;
  --section-py: 96px;

  /* ── 圆角 ──────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ── 动效 ────────────────────────────────────────────────
     入场与悬停走 expo-out 一族；弹性只给「浮起」类小动作。
     光斑漂移不在这里 —— 那是 60–90s 的环境动效，时长直接写在
     site.css 的 keyframes 引用处。 */
  --e-out:    cubic-bezier(.16, 1, .3, 1);
  --e-inout:  cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-soft:   cubic-bezier(.22, .9, .26, 1);
  --e-color:  linear;

  --d-fast:   140ms;
  --d-hover:  200ms;
  --d-base:   320ms;
  --d-slow:   560ms;
  --d-enter:  800ms;
  --d-sheen:  650ms;   /* 按钮/卡片的光泽扫过 */

  --stagger: 60ms;

  --focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--brand);
}

/* ── 响应式：四档（与深色版同一套断点与档位）──────────── */
@media (max-width: 1439px) {
  :root {
    --t-mega: 68px; --t-display: 50px; --t-h2: 34px;
    --section-py: 104px; --page-pad: 32px; --container: 1120px;
  }
}
@media (max-width: 1279px) {
  :root {
    --t-mega: 56px; --t-display: 42px; --t-h2: 30px; --t-h3: 21px;
    --n-hero: 44px; --section-py: 88px; --page-pad: 24px; --container: 100%;
    --gutter: 16px;
  }
}
@media (max-width: 899px) {
  :root {
    --t-mega: 44px; --t-display: 34px; --t-h2: 26px;
    --t-lead: 17px; --section-py: 72px;
  }
}
@media (max-width: 599px) {
  :root {
    --t-mega: 34px; --t-display: 28px; --t-h2: 22px; --t-h3: 18px;
    --t-lead: 16px; --n-hero: 34px;
    --section-py: 56px; --page-pad: 20px;
  }
}

/* 降级：关掉动画但保留静态终态，别让页面塌成空白 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms; --d-hover: 1ms; --d-base: 1ms;
    --d-slow: 1ms; --d-enter: 1ms; --d-sheen: 1ms; --stagger: 0ms;
  }
}

/* ══════════════════════════════════════════════════════════════
   购买页兼容层。

   buy.css 是在最早的浅色「账本纸」那版写的，用 --ink-900 / --paper /
   --hairline 这套旧名。深色版靠这一层映射活了下来，现在回到浅色，
   映射照样成立 —— buy.css 一行不用改。
   新写的东西请直接用上面的浅色令牌，别再引这一层。
   ══════════════════════════════════════════════════════════════ */
:root {
  /* 面与线 */
  --paper: var(--bg-0);
  --surface: var(--bg-2);
  --sunken: var(--void);
  --hairline: var(--line-1);
  --hairline-soft: var(--line-1);
  --hairline-hard: var(--line-2);

  /* 文字：浅色底由深到浅正着排 */
  --ink-900: var(--fg-0);
  --ink-700: var(--fg-1);
  --ink-500: var(--fg-2);
  --ink-300: var(--fg-3);

  /* 主色与语义色 */
  --accent: var(--brand);
  --accent-press: var(--brand-deep);
  --accent-tint: var(--brand-ghost);
  --gain: var(--ok);
  --loss: var(--bad);

  /* 字号：旧的数字档位接到对应档 */
  --n-sm: var(--t-sm);
  --n-md: var(--t-h3);
  --n-lg: var(--t-h2);
  --t-body-lg: var(--t-lead);
}