/* ============================================================
   云卡商城 · 样式模块 01/11 —— 01-tokens.css
   ------------------------------------------------------------
   职责：设计令牌：色彩 / 字阶 / 间距 / 圆角 / 层级 / 阴影，含浅色与深色两套主题
   涵盖：§1

   ⚠️ 加载顺序即层叠顺序，请勿调整 <link> 的先后。
      本文件由 style.css 按分节边界切出，规则未做任何重排。
   ============================================================ */

/* ============================================================
   云卡商城 · 设计系统 v2
   ------------------------------------------------------------
   设计原则
     1. 令牌驱动 —— 色彩 / 字阶 / 间距 / 圆角 / 层级全部走 CSS 变量，
        样式表里不出现硬编码的尺寸与颜色字面量。
     2. 单一强调色 —— 品牌蓝只用于「可交互」与「品牌标识」；
        金色只用于「金额」。不用装饰性渐变制造噪音。
     3. 靠层级而非描边区分信息 —— 背景面（surface）分 3 级，
        标题 / 正文 / 辅助文字三级对比，一眼能看出结构。
     4. 克制的动效 —— 只做「状态反馈」，不做装饰性入场。
        允许：hover / 按压 / 选中 / 角标变化这类**状态切换**的短过渡（≤180ms；
              数值与角标的变化可到 420ms，太短反而看不出"它变了"）；
              加载态专用的无限循环（骨架闪烁 / 转圈）。
        禁止：装饰性入场动画、滚动触发的逐个入场、视差、光效、任意其它循环动画。
        理由：这个站要的是"按下去有反馈"的精密感，不是"看起来很炫"。
              （弹层/toast/路由的入场属于第 2 层，尚未启用，见 SECURITY-AUDIT.md 的推进顺序。）
     5. 可访问性 —— 正文对比度 ≥ 4.5:1，键盘焦点可见，
        尊重 prefers-reduced-motion。

   契约：本文件覆盖 assets/js 源码中用到的全部类名与 ID 钩子。
        清单见 tests/contract.json
   ============================================================ */

/* ============================================================
   1 · 设计令牌
   ============================================================ */
/* ------------------------------------------------------------
   1.1 浅色主题（默认）
   对比度全部按 WCAG AA 校验：正文 ≥ 4.5:1
   ------------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* ---- 背景面（3 级层次）---- */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef1f6;
  --surface-hover: #f2f5fa;
  --inset: #ffffff;

  /* ---- 描边 ---- */
  --line: #e6e9f0;
  --line-2: #d7dce6;
  --line-strong: #b8c0cf;

  /* ---- 文字（三级）---- */
  --text: #0f172a;
  --text-2: #4a5568;
  --text-3: #6b7688;
  --text-on: #ffffff;

  /* ---- 品牌色（唯一强调色）---- */
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-active: #1e40af;
  --brand-fg: #1d4ed8;
  --brand-bg: #eff4ff;
  --brand-line: #c7d8fd;
  --brand-soft: rgba(37, 99, 235, .07);

  /* ---- 金额（暖琥珀，仅用于价格）---- */
  --gold: #b45309;
  --gold-hover: #92400e;
  --gold-fg: #b45309;
  --gold-bg: #fffaeb;
  --gold-line: #f3d9a4;
  --gold-soft: rgba(180, 83, 9, .055);
  /* 专属商品套餐卡片的图区底色（暖色渐变两停）。
     单独出两个令牌而不是复用 --gold-bg：礼包图是白底方图，压在
     纯色上会露出一个白方块；这里的底色要足够暖、足够浅，
     配合 mix-blend-mode: multiply 才能让白底"融掉"。
     深色主题下这两条不参与渲染（图区改用 --surface-2），见 07-product.css。 */
  --gold-tile-a: #fffdf7;
  --gold-tile-b: #fff6e4;
  --gold-tile-a-on: #fff8e8;
  --gold-tile-b-on: #ffefd0;

  /* ---- 语义色（仅用于状态）---- */
  --ok: #16a34a;
  --ok-fg: #15803d;
  --ok-bg: #f0fdf4;
  --ok-line: #b7e4c4;

  --warn: #d97706;
  --warn-fg: #b45309;
  --warn-bg: #fffbeb;
  --warn-line: #f5ddab;

  --danger: #dc2626;
  --danger-fg: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-line: #f7c9c9;

  --info-fg: #1d4ed8;
  --info-bg: #eff6ff;
  --info-line: #c3d9fb;

  --neutral-fg: #4a5568;
  --neutral-bg: #f1f3f7;

  --purple-fg: #7e22ce;
  --purple-bg: #faf5ff;
  --purple-line: #e3cffa;

  /* ---- 结构性表面色 ---- */
  --header-bg: rgba(255, 255, 255, .9);
  --topbar-bg: rgba(255, 255, 255, .94);
  --overlay: rgba(15, 23, 42, .42);
  --tip-strong: #1e40af;
  --tip-danger-strong: #991b1b;
  --gold-on: #ffffff;

  /* ---- 阴影 / 焦点环 ---- */
  --sh-1: 0 1px 2px rgba(15, 23, 42, .05);
  --sh-2: 0 4px 14px rgba(15, 23, 42, .07);
  --sh-3: 0 16px 40px rgba(15, 23, 42, .13);
  --ring: 0 0 0 3px rgba(37, 99, 235, .2);

  /* ==========================================================
     1.3 结构令牌（与主题无关，两套主题共用）
     ========================================================== */

  /* ---- 字阶（10 级）---- */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;

  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.85;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- 间距（4px 栅格）---- */
  --sp-1: 4px;
  --sp-1h: 6px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- 图标尺寸（Emoji / 装饰图标，非文字字号）---- */
  --ico-sm: 22px;
  --ico-md: 28px;
  --ico-lg: 40px;
  --ico-xl: 56px;
  --ico-2xl: 84px;

  /* ---- 圆角 ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---- 层级 ---- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- 尺寸 ---- */
  --header-h: 64px;
  --max-w: 1280px;
  --ctl-h: 40px;
  --ctl-h-sm: 32px;
  --ctl-h-lg: 48px;

  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB",
    "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  /* 品牌瓦片变量：默认值兜底，实际由 JS 按每个品牌色内联覆盖 */
  --tile: var(--brand);
  --tile-rgb: 37 99 235;

  /* ---- 动效时序（只用「状态反馈」，不做入场动画 —— 见文件头第 4 条）----
     为什么要有刻度而不是一个值：
       原来全站只有 --tr 一个 160ms，于是按钮按压、角标跳动、弹层、caret 翻转
       全都一样快 —— 没有快慢对比，就感觉不到"节奏"，界面会显得平。
       --tr      状态切换（hover / 选中 / 展开）160ms，全站默认，行为不变
       --d-press 按压反馈 100ms —— "手感和没反应"的分界线
       --d-pop   数值 / 角标变化 420ms —— 必须比状态切换慢，才看得出"它变了"
     ● 缓动不要用 bounce / elastic：那是 2015 年的味道，且会把注意力吸到动画本身。 */
  --tr: 160ms cubic-bezier(.4, 0, .2, 1);
  --d-press: 100ms;
  --d-pop: 420ms;
  --e-out: cubic-bezier(.25, 1, .5, 1);   /* 落位 / 展开 */
  --e-io: cubic-bezier(.65, 0, .35, 1);   /* 来回切换 */
}

/* ------------------------------------------------------------
   1.2 深色主题（可选，由 data-theme="dark" 激活）
   ------------------------------------------------------------ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #10141d;
  --surface: #171c28;
  --surface-2: #1d2331;
  --surface-3: #262d3d;
  --surface-hover: #202737;
  --inset: #12161f;

  --line: #2a3142;
  --line-2: #363e52;
  --line-strong: #4a5468;

  --text: #edf1f9;
  --text-2: #b0bacd;
  --text-3: #8792a8;
  --text-on: #ffffff;

  --brand: #4d7cfe;
  --brand-hover: #6b93ff;
  --brand-active: #3f68e0;
  --brand-fg: #93b4ff;
  --brand-bg: #1a2745;
  --brand-line: #33497f;
  --brand-soft: rgba(77, 124, 254, .14);

  --gold: #f0b13c;
  --gold-hover: #ffc35c;
  --gold-fg: #f5c463;
  --gold-bg: #35290f;
  --gold-line: #6b5218;
  --gold-soft: rgba(240, 177, 60, .1);
  /* 图区底色在深色主题下不启用（改用 --surface-2 + lighten），
     这里给同值兜底，避免变量悬空。 */
  --gold-tile-a: #171c28;
  --gold-tile-b: #1d2331;
  --gold-tile-a-on: #171c28;
  --gold-tile-b-on: #1d2331;

  --ok: #34c17b;
  --ok-fg: #5fdaa0;
  --ok-bg: #122c22;
  --ok-line: #22563f;

  --warn: #e0a020;
  --warn-fg: #f0bc50;
  --warn-bg: #32260e;
  --warn-line: #6a5219;

  --danger: #e05555;
  --danger-fg: #f79a9a;
  --danger-bg: #331519;
  --danger-line: #6d2c33;

  --info-fg: #86baf2;
  --info-bg: #132539;
  --info-line: #275078;

  --neutral-fg: #b0bacd;
  --neutral-bg: #222a3a;
  --purple-fg: #c9aef9;
  --purple-bg: #241a3a;
  --purple-line: #473672;

  --header-bg: rgba(16, 20, 29, .9);
  --topbar-bg: rgba(23, 28, 40, .94);
  --overlay: rgba(4, 6, 11, .72);
  --tip-strong: #a8ccf5;
  --tip-danger-strong: #fbb6b6;
  --gold-on: #2a1d00;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 6px 20px rgba(0, 0, 0, .34);
  --sh-3: 0 18px 44px rgba(0, 0, 0, .46);
  --ring: 0 0 0 3px rgba(77, 124, 254, .32);

}