/* idcub · 设计令牌与分类语义色；浅/深色、无障碍偏好。
   组件与依赖说明：../docs/CSS-ARCHITECTURE.md。 */

:root {
  --nv-brand: #2563eb;
  --nv-brand-rgb: 37, 99, 235;
  --nv-brand-hover: #1d4ed8;
  --nv-brand-ink: #1d4ed8;
  --nv-brand-solid: #1d4ed8;
  --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%);
  --nv-success: #2f8f6f;
  --nv-success-ink: #166b4f;
  --nv-success-solid: #2f8f6f;
  --nv-success-soft: rgba(47, 143, 111, .13);
  --nv-warning: #9a5700;
  --nv-warning-ink: #8a4b00;
  --nv-warning-solid: #8a4b00;
  --nv-warning-soft: rgba(154, 87, 0, .13);
  --nv-gold: #b45309;
  --nv-gold-ink: #7a4a00;
  --nv-gold-solid: #b45309;
  --nv-gold-soft: rgba(245, 158, 11, .16);
  --nv-gold-border: rgba(180, 83, 9, .34);
  --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);
  --nv-info: #0a84ff;
  --nv-info-ink: #0055b8;
  --nv-info-solid: #0060d0;
  --nv-info-soft: rgba(10, 132, 255, .12);
  --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);
  --nv-text-primary: #1d1d1f;
  --nv-text-secondary: #424245;
  --nv-text-muted: #6e6e73;
  --nv-text-faint: #86868b;
  --nv-breadcrumb-sep: #c7c7cc;
  --nv-text-on-solid: #ffffff;
  --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);
  --nv-price: #243b53;
  --nv-price-promo: #b45309;
  --nv-price-original: #6e6e73;
  --nv-price-strike: rgba(201, 52, 47, .55);
  --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;
  --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);
  --nv-blur: blur(20px) saturate(180%);
  --nv-blur-strong: blur(32px) saturate(190%);
  --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;
  --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;
  --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);
  --nv-z-base: 1;
  --nv-z-sticky: 100;
  --nv-z-header: 200;
  --nv-z-drawer: 300;
  --nv-z-modal: 400;
  --nv-z-toast: 500;
  --nv-container: 1544px;
  --nv-container-narrow: 760px;
  --nv-shop-side-w: 350px;
  --nv-header-h: 100px;
  --nv-tap-min: 44px;
  --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);
  --nv-control-sm-height: 34px;
  --nv-control-lg-height: 52px;
  --nv-control-font-size: 16px;
  --nv-control-border: 1px solid var(--nv-border);
}

[data-theme="dark"] {
  --nv-brand: #3b82f6;
  --nv-brand-rgb: 59, 130, 246;
  --nv-brand-hover: #60a5fa;
  --nv-brand-ink: #60a5fa;
  --nv-brand-solid: #1d4ed8;
  --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;
  --nv-success-solid: #248a3d;
  --nv-success-soft: rgba(48, 209, 88, .20);
  --nv-warning: #ff9f0a;
  --nv-warning-ink: #ffb340;
  --nv-warning-solid: #b26a00;
  --nv-warning-soft: rgba(255, 159, 10, .20);
  --nv-gold: #fbbf24;
  --nv-gold-ink: #fcd34d;
  --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;
  --nv-danger-solid: #d70015;
  --nv-danger-soft: rgba(255, 69, 58, .20);
  --nv-info: #0a84ff;
  --nv-info-ink: #64b5ff;
  --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;
  --nv-text-muted: #a1a1a6;
  --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;
  --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);
}

[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;
}

@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;
  }
}

[data-force-light="1"] {
  color-scheme: light;
}

[data-force-light="1"][data-theme="dark"] {
  color-scheme: light;
}

: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);
  --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);
  --ui-price-primary: var(--nv-price);
  --ui-price-promotion: var(--nv-price-promo);
  --ui-price-original: var(--nv-price-original);
  --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);
  --ui-focus-ring: var(--nv-ring);
}

:where(.side-group, .mcat-group) {
  --nv-category-tone: var(--nv-text-muted);
  --nv-category-surface: var(--nv-soft);
}

:where(.side-group, .mcat-group)[data-category-name="视频会员"] {
  --nv-category-tone: #ee704d;
  --nv-category-surface: color-mix(in srgb, #ee704d 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="游戏道具"] {
  --nv-category-tone: #7956df;
  --nv-category-surface: color-mix(in srgb, #7956df 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="办公软件"] {
  --nv-category-tone: #5274cf;
  --nv-category-surface: color-mix(in srgb, #5274cf 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="设计素材"] {
  --nv-category-tone: #dc6397;
  --nv-category-surface: color-mix(in srgb, #dc6397 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="学习课程"] {
  --nv-category-tone: #278dce;
  --nv-category-surface: color-mix(in srgb, #278dce 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="邮箱账号"] {
  --nv-category-tone: #259c89;
  --nv-category-surface: color-mix(in srgb, #259c89 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="网络加速"] {
  --nv-category-tone: #429b63;
  --nv-category-surface: color-mix(in srgb, #429b63 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="音乐会员"] {
  --nv-category-tone: #cd3d61;
  --nv-category-surface: color-mix(in srgb, #cd3d61 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="安全工具"] {
  --nv-category-tone: #3d5db4;
  --nv-category-surface: color-mix(in srgb, #3d5db4 10%, var(--nv-elevated));
}

:where(.side-group, .mcat-group)[data-category-name="生活消费"] {
  --nv-category-tone: #d99512;
  --nv-category-surface: color-mix(in srgb, #d99512 10%, var(--nv-elevated));
}