/* ==========================================================================
   idcub 主题 · 风格变体 (Variants)
   --------------------------------------------------------------------------
   圆角风格与图片比例的切换层。
   与 token.css 分离的原因：这三组规则必须【最后加载】才能覆盖 token.css，
   而 token.css 里其他令牌还要保持优先级。单独成文件让加载顺序明确可查。

   切换机制：<html> 上的 data-radius / data-card-ratio 属性（由 Header 内联脚本
   在首屏渲染前写入，避免切换时闪烁）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   圆角风格 · 三档
   --------------------------------------------------------------------------
   soft    —— 柔和（默认，对标参考项目 nuxt4.3 桌面端：card 16 / btn 12 / chip 10）
   rounded —— 圆润（更夸张的弧度）
   square  —— 方正（小圆角，收掉玻璃感）

   ★ 三档都必须显式定义完整的一组令牌，不能靠"某档回落到 token.css"——
     token.css 的默认值会随维护变，靠回落会让档位语义漂移。
   -------------------------------------------------------------------------- */
[data-radius="soft"] {
  --nv-radius-sm: .5rem;
  --nv-radius-md: .75rem;
  --nv-radius-lg: 1rem;
  --nv-radius-xl: 1.5rem;
  --nv-radius-2xl: 2rem;
  --nv-radius-card: 1rem;
  --nv-radius-btn: .75rem;
  --nv-radius-chip: .625rem;
  --nv-radius-sheet: 1.25rem;
}

[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;
  /* 语义档对标参考项目 nuxt4.3 桌面端：card 16 / btn 12 / chip 10 */
  --nv-radius-card: 1rem;
  --nv-radius-btn: .75rem;
  --nv-radius-chip: .625rem;
  --nv-radius-sheet: 1.5rem;
}

[data-radius="square"] {
  --nv-radius-sm: .25rem;
  --nv-radius-md: .375rem;
  --nv-radius-lg: .5rem;
  --nv-radius-xl: .75rem;
  --nv-radius-2xl: 1rem;
  --nv-radius-card: .375rem;
  --nv-radius-btn: .375rem;
  --nv-radius-chip: .25rem;
  --nv-radius-sheet: .5rem;
  /* 方正风格下收掉玻璃感，靠边框而非模糊表达层次 */
  --nv-glass: rgba(255, 255, 255, .94);
  --nv-glass-strong: rgba(255, 255, 255, .98);
  --nv-blur: saturate(180%);
  --nv-blur-strong: saturate(190%);
}

/* --------------------------------------------------------------------------
   商品卡图片比例
   -------------------------------------------------------------------------- */
[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: 4 / 3; }

/* --------------------------------------------------------------------------
   强制浅色
   后台把 dark_mode 设为 0 时使用：即使系统是深色、即使 localStorage 存了 dark，
   也强制浅色 —— 避免出现「深色底 + 深色文字」的不可读组合。
   -------------------------------------------------------------------------- */
[data-force-light] {
  color-scheme: light;
}
[data-force-light] .nv-header,
[data-force-light] .nv-drawer,
[data-force-light] .nv-drop__menu,
[data-force-light] .nv-buybar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* --------------------------------------------------------------------------
   品牌色自定义 —— 已移除（2026-10-16 定案，改为锁定单一色系）
   --------------------------------------------------------------------------
   这里原本有一段 html[data-nv-brand] 规则，本意是让站长在后台填的品牌色覆盖
   token.css 的默认蓝。它引用了 --nv-brand-attr / --nv-brand-solid-attr /
   --nv-brand-end-attr 三个自定义属性，注释里写着「JS 在渲染前同步」。

   ★★ 但那个 JS 从来不存在（全项目检索定义数为 0）。后果不是配色难看，而是：
     属性非空 → 规则命中 → var(--nv-*-attr) 既未定义又无 fallback
     → 自定义属性在 computed-value 阶段非法 → 整条声明退化为 unset
     → background-image: var(--nv-gradient) 变 none，而 color 仍是 #ffffff
     → 全站主按钮变成「透明底 + 白字」，视觉上完全消失。
     （var(--nv-gradient) 在本主题共 24 处引用，会一起失效。）

   ★ 现在色系锁死在 token.css 的 :root 里，本站不再需要品牌色桥接层。
     若将来确需换色：直接改 token.css 的三档值（装饰 / -ink / -solid），
     并重跑 scripts/audit-colors.mjs 卡 WCAG AA，不要再引入
     「HTML 属性 → 自定义属性」这种需要 JS 参与的间接引用。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   顶栏动作区 · 按钮与图标
   --------------------------------------------------------------------------
   ★★ 重要修正（2026-10-14）：
     这一节原来照搬参考项目 nuxt4.3 的假设 ——「顶栏是品牌蓝底」，
     所以把按钮做成「白底胶囊 / 半透明白」，图标按钮做成白色。

     但 idcub 的 .nv-header 实际是【毛玻璃浅底】（--nv-glass，浅色下近白），
     于是：
       登录  → 白底 + 蓝字，在近白页头上 = 几乎看不见（只剩文字）
       注册  → rgba(255,255,255,.18) 底 + 纯白字，在浅底上 = 【完全不可见】
       图标  → color: rgba(255,255,255,.92)，同样白到看不见

     → 结论：不能假设顶栏底色。改为「跟随页面主题」的中性样式：
        登录（主操作）= 品牌渐变实底
        注册（次操作）= 中性描边按钮
       图标按钮      = 跟随 --nv-text-secondary（base.css 已有默认，这里不覆盖）
   -------------------------------------------------------------------------- */

/* 顶栏内的按钮统一胶囊形，与搜索框、图标按钮的圆度一致 */
.nv-header .nv-btn {
  border-radius: var(--nv-radius-pill);
  white-space: nowrap;
}

/* 主操作：登录 —— 品牌渐变实底，在任何底色上都有足够对比 */
.nv-btn--white {
  background-image: var(--nv-gradient);
  border-color: transparent;
  color: var(--nv-text-on-solid, #fff);
  border-radius: var(--nv-radius-pill);
  font-weight: var(--nv-weight-bold);
  box-shadow: var(--nv-shadow-brand);
}

.nv-btn--white:hover:not(:disabled) {
  color: var(--nv-text-on-solid, #fff);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px rgba(var(--nv-brand-rgb), 0.55);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--nv-brand) 55%, transparent);
}

/* 次操作：注册 —— 中性描边，浅底深底都成立 */
.nv-btn--glass {
  background-color: transparent;
  border-color: var(--nv-border-strong, var(--nv-border));
  color: var(--nv-text-primary);
  border-radius: var(--nv-radius-pill);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nv-btn--glass:hover:not(:disabled) {
  background-color: var(--nv-brand-soft);
  border-color: var(--nv-border-brand);
  color: var(--nv-brand-ink);
}

/* --------------------------------------------------------------------------
   顶栏图标按钮 · 固定样式
   --------------------------------------------------------------------------
   与登录/注册同因：原来写死白色，在浅色页头上不可见。
   改为跟随主题文字色；hover 用品牌浅底表达可点。
   ★ 抽屉内的图标按钮不在 .nv-header 下，不受这里影响，保持 base.css 默认。
   -------------------------------------------------------------------------- */
.nv-header .nv-icon-btn {
  border-radius: var(--nv-radius-pill);
  color: var(--nv-text-secondary);
}
.nv-header .nv-icon-btn:hover {
  background-color: var(--nv-brand-softer);
  color: var(--nv-brand-ink);
}
/* 用户头像按钮：hover 时给一圈品牌描边，强化"这是可点的菜单" */
.nv-header .nv-user-btn:hover {
  background-color: var(--nv-brand-softer);
  box-shadow: 0 0 0 2px var(--nv-brand-soft);
}