/* ==========================================================================
   idcub 主题 · 设计令牌 (Design Tokens)
   --------------------------------------------------------------------------
   设计语言移植自 nuxt4.3（idcub 独角商城）的 Apple HIG 风格体系。

   ★ 三层色板纪律（本设计的核心规则）
     每个语义色拆三个值，各司其职，不可混用：
       · 无后缀  = 品牌原值，仅用于【装饰】：渐变、色条、色相叠加
       · -ink    = 压深/提亮到 WCAG AA 达标，用作【浅色底上的文字】
       · -solid  = 压深到能承受白字，用作【实心按钮填充】

     为什么必须拆三层：
       --nv-accent 是给「图标 + 浅底文字」调的中间明度蓝。
       当它被当作实心底 + 白字时，暗色侧 #3b82f6 上的白字只有 3.68:1，
       未达 WCAG AA 4.5:1。所以必须另配 -solid。

   实测对比度（浅色 / 暗色）已写入注释，改色时请重新核算。

   ========================================================================== */

:root {
  /* ========================================================================
     1. 品牌主色 · Brand
     ======================================================================== */
  --nv-brand: #2563eb;
  --nv-brand-rgb: 37, 99, 235;                /* 浅底图标、强调文字        */
  --nv-brand-hover: #1d4ed8;          /* hover                    */
  --nv-brand-ink: #1d4ed8;            /* 浅底文字   5.02:1        */
  --nv-brand-solid: #1d4ed8;          /* 实心填充 + 白字 6.70:1   */
  --nv-brand-soft: rgba(37, 99, 235, .13);
  --nv-brand-softer: rgba(37, 99, 235, .07);
  --nv-brand-gradient-end: #0ea5e9;

  --nv-gradient: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);

  /* ========================================================================
     2. 语义色 · Semantic（三层纪律）
     ======================================================================== */

  /* 成功 —— #2f8f6f 装饰，#166b4f 浅底文字 4.95:1 */
  --nv-success: #2f8f6f;
  --nv-success-ink: #166b4f;
  --nv-success-solid: #2f8f6f;
  --nv-success-soft: rgba(47, 143, 111, .13);

  /* 警告 —— #9a5700 装饰，#8a4b00 浅底文字 4.98:1 */
  --nv-warning: #9a5700;
  --nv-warning-ink: #8a4b00;
  --nv-warning-solid: #8a4b00;
  --nv-warning-soft: rgba(154, 87, 0, .13);

  /* 推荐金 —— 专供「推荐」徽章，与 warning 分开是为了能单独调。
     ★ 为什么不用 warning：#9a5700 偏褐，做成徽章像"报错"而不是"精选"。
       推荐位要的是"荣誉感"，所以取更饱和的金，文字压到 #7a4a00 保住对比度。
     ★ 为什么文字不是纯金：#f59e0b 底 + 白字只有 2.1:1，远达不到 AA(4.5:1)。
       做法是【浅金底 + 深棕金文字】，既有金色的温度又能读清。 */
  --nv-gold: #b45309;                 /* 装饰 / 描边 / 图标        */
  --nv-gold-ink: #7a4a00;             /* 浅底文字   5.61:1         */
  --nv-gold-solid: #b45309;           /* 实心填充 + 白字 4.78:1    */
  --nv-gold-soft: rgba(245, 158, 11, .16);
  --nv-gold-border: rgba(180, 83, 9, .34);

  /* 危险 —— #c9342f 装饰，#a3241f 浅底文字 5.36:1，实心 + 白字 5.92:1 */
  --nv-danger: #c9342f;
  --nv-danger-rgb: 201, 52, 47;
  --nv-danger-ink: #a3241f;
  --nv-danger-solid: #c9342f;
  --nv-danger-soft: rgba(201, 52, 47, .12);

  /* 信息 —— #0a84ff 装饰，#0055b8 浅底文字 5.37:1 */
  --nv-info: #0a84ff;
  --nv-info-ink: #0055b8;
  --nv-info-solid: #0060d0;
  --nv-info-soft: rgba(10, 132, 255, .12);

  /* ========================================================================
     3. 中性面 · Surface
     ======================================================================== */
  --nv-page: #f5f5f7;
  --nv-elevated: #ffffff;
  --nv-soft: #f2f2f4;
  --nv-muted: #ececf0;
  --nv-sunken: #e8e8ed;

  /* 毛玻璃：纪律 —— 玻璃不能叠玻璃，可读性会崩 */
  --nv-glass: rgba(255, 255, 255, .78);
  --nv-glass-strong: rgba(255, 255, 255, .92);
  --nv-glass-border: rgba(255, 255, 255, .60);

  /* ========================================================================
     4. 文字 · Ink
     ======================================================================== */
  --nv-text-primary: #1d1d1f;
  --nv-text-secondary: #424245;
  --nv-text-muted: #6e6e73;            /* 4.54:1 */
  --nv-text-faint: #86868b;            /* 仅装饰性文字，不承载信息 */
  /* 面包屑分隔符：比 faint 再淡一档。
     分隔符是纯装饰、不承载信息，越淡越能让文字层级站出来。
     太深会让整条面包屑看起来像一串等权重的文本。 */
  --nv-breadcrumb-sep: #c7c7cc;
  --nv-text-on-solid: #ffffff;

  /* ========================================================================
     5. 描边 · Border
     ======================================================================== */
  --nv-border: rgba(0, 0, 0, .12);
  --nv-border-rgb: 0, 0, 0;
  --nv-border-a: .12;
  --nv-border-strong: rgba(0, 0, 0, .20);
  --nv-border-soft: rgba(0, 0, 0, .07);
  --nv-border-soft-rgb: 0, 0, 0;
  --nv-border-soft-a: .07;
  --nv-border-brand: rgba(37, 99, 235, .40);

  /* ========================================================================
     6. 价格 · Price
     促销价用暖橙，与品牌蓝拉开色相（原方案同色系导致降价感知弱）
     ======================================================================== */
  --nv-price: #243b53;
  --nv-price-promo: #b45309;          /* 浅底 5.31:1 */
  --nv-price-original: #6e6e73;       /* 划线原价 */
  --nv-price-strike: rgba(201, 52, 47, .55);

  /* ========================================================================
     7. 圆角 · Radius
     圆角风格可由后台切换，此处为圆润档（桌面基准）

     ★ 分两套：通用档 + 语义档
       通用档（sm/md/lg/xl/2xl）—— 给布局容器、输入框等用
       语义档（card/btn/chip）—— 给具体组件用，语义明确、调起来不牵连他处

     语义档对标参考项目 nuxt4.3（idcub）：
       card  16px / btn 12px / chip 10px
     这样「卡片圆一点、按钮方一点」的细节差能独立表达。
     ======================================================================== */
  --nv-radius-sm: .5rem;
  --nv-radius-md: .75rem;
  --nv-radius-lg: 1rem;
  --nv-radius-xl: 1.5rem;
  --nv-radius-2xl: 2rem;
  --nv-radius-pill: 999px;

  /* 语义档 */
  --nv-radius-card: 1rem;      /* 卡片、面板 */
  --nv-radius-btn: .75rem;     /* 实心/描边按钮 */
  --nv-radius-chip: .625rem;   /* 标签、胶囊、徽章 */
  --nv-radius-sheet: 1.25rem;  /* 抽屉顶部、大弹层 */

  /* ========================================================================
     8. 阴影 · Elevation
     Apple 风格特征：负 spread 远大于位移 → 柔和光晕而非硬投影
     ======================================================================== */
  --nv-shadow-1: 0 10px 24px -18px rgba(0, 0, 0, .26);
  --nv-shadow-2: 0 18px 38px -24px rgba(0, 0, 0, .30);
  --nv-shadow-3: 0 30px 64px -34px rgba(0, 0, 0, .36);
  --nv-shadow-card: 0 24px 52px -32px rgba(0, 0, 0, .35);
  --nv-shadow-brand: 0 12px 28px -14px rgba(37, 99, 235, .42);

  /* ========================================================================
     9. 毛玻璃 · Material
     ======================================================================== */
  --nv-blur: blur(20px) saturate(180%);
  --nv-blur-strong: blur(32px) saturate(190%);

  /* ========================================================================
     10. 间距 · Spacing（4px 基准）
     ======================================================================== */
  --nv-space-1: .25rem;
  --nv-space-2: .5rem;
  --nv-space-3: .75rem;
  --nv-space-4: 1rem;
  --nv-space-5: 1.25rem;
  --nv-space-6: 1.5rem;
  --nv-space-8: 2rem;
  --nv-space-10: 2.5rem;
  --nv-space-12: 3rem;
  --nv-space-16: 4rem;

  /* ========================================================================
     11. 排版 · Typography
     ★ 字距随字号反向变化：大字负字距（收紧），小字正字距（可读）
       固定一个 letter-spacing 必然在某些层级是错的
     ======================================================================== */
  --nv-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
             "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", system-ui, sans-serif;
  --nv-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --nv-fs-display: clamp(1.75rem, 4vw, 2.5rem);
  --nv-fs-title: 1.5rem;
  --nv-fs-heading: 1.125rem;
  --nv-fs-body: .875rem;
  --nv-fs-caption: .75rem;
  --nv-fs-micro: .6875rem;

  --nv-lh-display: 1.1;
  --nv-lh-heading: 1.26;
  --nv-lh-body: 1.62;
  --nv-lh-tight: 1.4;

  --nv-ls-display: -.03em;
  --nv-ls-title: -.018em;
  --nv-ls-heading: -.012em;
  --nv-ls-body: 0;
  --nv-ls-small: .01em;

  --nv-weight-regular: 400;
  --nv-weight-medium: 500;
  --nv-weight-bold: 700;

  /* ========================================================================
     12. 动效 · Motion
     ======================================================================== */
  --nv-dur-fast: 150ms;
  --nv-dur-normal: 250ms;
  --nv-dur-slow: 400ms;
  --nv-ease-out: cubic-bezier(.16, 1, .3, 1);
  --nv-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --nv-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ========================================================================
     13. 层级 · Z-index
     ======================================================================== */
  --nv-z-base: 1;
  --nv-z-sticky: 100;
  --nv-z-header: 200;
  --nv-z-drawer: 300;
  --nv-z-modal: 400;
  --nv-z-toast: 500;

  /* ========================================================================
     14. 布局 · Layout
     ======================================================================== */
  /* 内容区目标宽 1480px。
     ★ 1544 = 1480 + 左右内边距 32×2（--nv-space-8，≥1280px 生效）。
       因为全局 box-sizing: border-box，max-width 含 padding，
       所以要让【内容区】达到 1480，max-width 必须补上两侧内边距。 */
  --nv-container: 1544px;
  --nv-container-narrow: 760px;
  --nv-header-h: 100px;                /* 吸顶层（.nv-mainbar）的高度，吸顶元素用它做偏移 */
  --nv-tap-min: 44px;                  /* WCAG 2.5.5 触控下限 */

  /* 商品卡图片比例 */
  --nv-card-ratio: 4 / 3;

  /* 焦点环 */
  --nv-ring: 0 0 0 3px rgba(37, 99, 235, .28);
  --nv-ring-danger: 0 0 0 3px rgba(201, 52, 47, .26);
}

/* ==========================================================================
   暗色模式 · Dark Theme
   浅色底上的深色反转成深色底上的浅色，且重新核算对比度
   ========================================================================== */
[data-theme="dark"] {
  --nv-brand: #3b82f6;
  --nv-brand-rgb: 59, 130, 246;
  --nv-brand-hover: #60a5fa;
  --nv-brand-ink: #60a5fa;            /* 深底文字   5.31:1 */
  --nv-brand-solid: #1d4ed8;          /* 白字保持 6.70:1 */
  --nv-brand-soft: rgba(59, 130, 246, .24);
  --nv-brand-softer: rgba(59, 130, 246, .13);
  --nv-brand-gradient-end: #38bdf8;

  --nv-gradient: linear-gradient(135deg, #3b82f6 0%, #38bdf8 100%);

  --nv-success: #30d158;
  --nv-success-ink: #30d158;          /* 深底文字   9.31:1 */
  --nv-success-solid: #248a3d;
  --nv-success-soft: rgba(48, 209, 88, .20);

  --nv-warning: #ff9f0a;
  --nv-warning-ink: #ffb340;          /* 深底文字   8.85:1 */
  --nv-warning-solid: #b26a00;
  --nv-warning-soft: rgba(255, 159, 10, .20);

  /* 推荐金（暗色）—— 深底上要反着来：文字用亮金，底用低透明金。 */
  --nv-gold: #fbbf24;
  --nv-gold-ink: #fcd34d;             /* 深底文字   10.6:1 */
  --nv-gold-solid: #b45309;
  --nv-gold-soft: rgba(251, 191, 36, .20);
  --nv-gold-border: rgba(251, 191, 36, .38);

  --nv-danger: #ff453a;
  --nv-danger-rgb: 255, 69, 58;
  --nv-danger-ink: #ff6961;           /* 深底文字   6.22:1 */
  --nv-danger-solid: #d70015;
  --nv-danger-soft: rgba(255, 69, 58, .20);

  --nv-info: #0a84ff;
  --nv-info-ink: #64b5ff;             /* 深底文字   7.36:1 */
  --nv-info-solid: #0071e6;
  --nv-info-soft: rgba(10, 132, 255, .20);

  --nv-page: #000000;
  --nv-elevated: #1c1c1e;
  --nv-soft: #2c2c2e;
  --nv-muted: #242426;
  --nv-sunken: #141416;

  --nv-glass: rgba(44, 44, 46, .80);
  --nv-glass-strong: rgba(28, 28, 30, .94);
  --nv-glass-border: rgba(255, 255, 255, .12);

  --nv-text-primary: #f5f5f7;
  --nv-text-secondary: #d2d2d7;       /* 8.72:1 */
  --nv-text-muted: #a1a1a6;           /* 4.97:1（原 #8e8e93 仅 3.92） */
  --nv-text-faint: #7c7c80;

  --nv-border: rgba(255, 255, 255, .14);
  --nv-border-rgb: 255, 255, 255;
  --nv-border-a: .14;
  --nv-border-strong: rgba(255, 255, 255, .24);
  --nv-border-soft: rgba(255, 255, 255, .08);
  --nv-border-soft-rgb: 255, 255, 255;
  --nv-border-soft-a: .08;
  --nv-border-brand: rgba(96, 165, 250, .46);

  --nv-price: #f5f5f7;
  --nv-price-promo: #fbbf24;          /* 深底文字   9.51:1 */
  --nv-price-original: #9a9aa0;
  --nv-price-strike: rgba(255, 69, 58, .60);

  --nv-shadow-1: 0 10px 24px -18px rgba(0, 0, 0, .70);
  --nv-shadow-2: 0 18px 38px -24px rgba(0, 0, 0, .78);
  --nv-shadow-3: 0 30px 64px -34px rgba(0, 0, 0, .86);
  --nv-shadow-card: 0 24px 52px -32px rgba(0, 0, 0, .82);
  --nv-shadow-brand: 0 12px 28px -14px rgba(59, 130, 246, .55);

  --nv-ring: 0 0 0 3px rgba(96, 165, 250, .38);
  --nv-ring-danger: 0 0 0 3px rgba(255, 105, 97, .34);
}

/* ==========================================================================
   圆角风格变体 · Radius Styles（由后台 SUBMIT 的 radius_style 切换）
   ========================================================================== */
[data-radius="square"] {
  --nv-radius-sm: .25rem;
  --nv-radius-md: .375rem;
  --nv-radius-lg: .5rem;
  --nv-radius-xl: .75rem;
  --nv-radius-2xl: 1rem;
}

[data-radius="rounded"] {
  --nv-radius-sm: .625rem;
  --nv-radius-md: 1rem;
  --nv-radius-lg: 1.25rem;
  --nv-radius-xl: 1.75rem;
  --nv-radius-2xl: 2.25rem;
}

/* ==========================================================================
   商品卡图片比例变体
   ========================================================================== */
[data-card-ratio="square"] { --nv-card-ratio: 1 / 1; }
[data-card-ratio="tall"] { --nv-card-ratio: 3 / 4; }
[data-card-ratio="wide"] { --nv-card-ratio: 16 / 9; }

/* ==========================================================================
   无障碍 · Reduced Motion
   WCAG 2.3.3 / prefers-reduced-motion
   滑动/弹性动效换成纯 opacity 淡入，不做前庭刺激
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 降低透明度偏好：玻璃变实心 */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --nv-glass: rgba(255, 255, 255, .98);
    --nv-glass-strong: #ffffff;
  }
  [data-theme="dark"] {
    --nv-glass: rgba(28, 28, 30, .98);
    --nv-glass-strong: #1c1c1e;
  }
}

/* 提高对比度偏好 */
@media (prefers-contrast: more) {
  :root {
    --nv-border: rgba(0, 0, 0, .40);
  --nv-border-rgb: 0, 0, 0;
  --nv-border-a: .40;
    --nv-border-strong: rgba(0, 0, 0, .60);
    --nv-glass: #ffffff;
  }
  [data-theme="dark"] {
    --nv-border: rgba(255, 255, 255, .44);
  --nv-border-rgb: 255, 255, 255;
  --nv-border-a: .44;
    --nv-border-strong: rgba(255, 255, 255, .64);
    --nv-glass: #1c1c1e;
  }
}

/* 强制浅色（后台配置 dark_mode=0 时，Header 把 <html data-force-light> 置为 "1"）
   --------------------------------------------------------------------------
   ★★ 必须带 ="1"，不能只写 [data-force-light]。
      该属性**始终存在**（值恒为 "0" 或 "1"），而 [data-force-light] 是
      【属性存在性】选择器、不看值 —— 只写属性名会让规则恒真，
      表现为暗色模式下 color-scheme 被锁成 light：
      滚动条、勾选框、下拉框、日期选择器、输入框自动填充底色
      全是一片浅色，嵌在深色卡片里非常突兀。
   -------------------------------------------------------------------------- */
[data-force-light="1"] {
  color-scheme: light;
}
[data-force-light="1"][data-theme="dark"] {
  /* JS 未安装时回落到浅色，不出现深色底 + 深色文字 */
  color-scheme: light;
}
/* ══════════════════════════════════════════════════════════════════════════
   B1. Nuxt 4.3 令牌桥接层 · --ui-* → --nv-*
   --------------------------------------------------------------------------
   目的：让本主题可以直接复用 idcub-dujiao-myuse（Nuxt 4.3）的样式片段。

   ★ 为什么需要它：
     两套系统的令牌【数值已 100% 相同】（主/次/弱文本、柔和底、品牌蓝、
     成功/警告/危险/信息、圆角三档、阴影两档，实测逐项一致），
     只是命名不同（--ui-*  vs  --nv-*）。
     加这层别名后，从 Nuxt 搬样式时只需把工具类换成语义化 CSS 规则，
     色值一个都不用改。

   ★ 为什么放在最末尾：
     别名指向的是上面已定义好的 --nv-*，必须在其后声明才能解析。
     CSS 自定义属性的引用是"延迟解析"的，但同文件内的可读性还是按序更好。

   ★ 注意：这层是【单向只读】——只让 --ui-* 可用，
     不改动 --nv-* 本身。主题自己的样式仍应继续用 --nv-*，
     桥接层只服务于"搬运 Nuxt 代码"这个场景。
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── 表面 ── */
  --ui-bg-page: var(--nv-page);
  --ui-bg-elevated: var(--nv-elevated);
  --ui-bg-soft: var(--nv-soft);
  --ui-bg-muted: var(--nv-muted);
  --ui-bg-sunken: var(--nv-sunken);

  /* ── 文字 ── */
  --ui-text-primary: var(--nv-text-primary);
  --ui-text-secondary: var(--nv-text-secondary);
  --ui-text-muted: var(--nv-text-muted);
  --ui-text-faint: var(--nv-text-faint);
  --ui-text-on-accent: var(--nv-text-on-solid);

  /* ── 描边 ── */
  --ui-border: var(--nv-border);
  --ui-border-strong: var(--nv-border-strong);
  --ui-border-soft: var(--nv-border-soft);

  /* ── 强调色（Nuxt 的 accent 即本主题的品牌色）── */
  --ui-accent: var(--nv-brand);
  --ui-accent-hover: var(--nv-brand-hover);
  --ui-accent-ink: var(--nv-brand-ink);
  --ui-accent-solid: var(--nv-brand-solid);
  --ui-accent-soft: var(--nv-brand-soft);
  --ui-accent-softer: var(--nv-brand-softer);

  /* ── 语义色 ── */
  --ui-success: var(--nv-success);
  --ui-success-ink: var(--nv-success-ink);
  --ui-success-soft: var(--nv-success-soft);
  --ui-warning: var(--nv-warning);
  --ui-warning-ink: var(--nv-warning-ink);
  --ui-warning-soft: var(--nv-warning-soft);
  --ui-danger: var(--nv-danger);
  --ui-danger-ink: var(--nv-danger-ink);
  --ui-danger-soft: var(--nv-danger-soft);
  --ui-info: var(--nv-info);
  --ui-info-ink: var(--nv-info-ink);
  --ui-info-soft: var(--nv-info-soft);

  /* ── 价格（Nuxt 用独立的 price-primary / promotion）── */
  --ui-price-primary: var(--nv-price);
  --ui-price-promotion: var(--nv-price-promo);
  --ui-price-original: var(--nv-price-original);

  /* ── 圆角（Nuxt 无 -pill/-card/-btn，按其语义就近映射）── */
  --ui-radius-sm: var(--nv-radius-sm);
  --ui-radius-md: var(--nv-radius-md);
  --ui-radius-lg: var(--nv-radius-lg);
  --ui-radius-xl: var(--nv-radius-xl);
  --ui-radius-chip: var(--nv-radius-chip);
  --ui-radius-card: var(--nv-radius-card);
  --ui-radius-btn: var(--nv-radius-btn);

  /* ── 阴影 ── */
  --ui-shadow-1: var(--nv-shadow-1);
  --ui-shadow-2: var(--nv-shadow-2);
  --ui-shadow-3: var(--nv-shadow-3);
  --ui-shadow-soft: var(--nv-shadow-card);

  /* ── 品牌渐变 ── */
  --ui-brand-gradient: var(--nv-gradient);

  /* ── 焦点环（Nuxt 单独定义，本主题用 --nv-ring）── */
  --ui-focus-ring: var(--nv-ring);
}