/*
 * Premium UI tokens for the women's fashion commerce operating system.
 * Activation is intentionally opt-in. No rule applies until the document
 * carries body.premium-ui or data-ui-skin="premium".
 */

body.premium-ui,
[data-ui-skin="premium"] {
  color-scheme: light;

  /* Typography */
  --wx-font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wx-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --wx-text-xs: 12px;
  --wx-text-sm: 13px;
  --wx-text-md: 13px;
  --wx-text-base: 14px;
  --wx-text-lg: 16px;
  --wx-text-xl: 18px;
  --wx-text-2xl: 24px;
  --wx-text-metric: clamp(22px, 1.8vw, 28px);
  --wx-leading-tight: 1.35;
  --wx-leading-base: 1.55;
  --wx-leading-relaxed: 1.6;
  --wx-weight-regular: 400;
  --wx-weight-medium: 500;
  --wx-weight-semibold: 600;
  --wx-weight-bold: 600;

  /* Neutral surfaces and text */
  --wx-page: #f6f7f9;
  --wx-surface: #ffffff;
  --wx-surface-subtle: #f8f9fb;
  --wx-surface-muted: #f1f3f6;
  --wx-surface-raised: #ffffff;
  --wx-ink: #172033;
  --wx-text: #344054;
  --wx-text-muted: #667085;
  --wx-text-faint: #98a2b3;
  --wx-border: #e4e7ec;
  --wx-border-strong: #d0d5dd;
  --wx-divider: #eef0f3;

  /* Brand and navigation */
  --wx-brand-950: #101828;
  --wx-brand-900: #172033;
  --wx-brand-800: #253147;
  --wx-brand-700: #344054;
  --wx-primary: #3559c7;
  --wx-primary-hover: #2d4cab;
  --wx-primary-active: #253e8f;
  --wx-primary-soft: #f0f4ff;
  --wx-primary-border: #cdd8fb;

  /* Operational semantics */
  --wx-info: #3158a5;
  --wx-info-soft: #f0f5ff;
  --wx-info-border: #cfdcf3;
  --wx-success: #16745a;
  --wx-success-soft: #eef8f4;
  --wx-success-border: #c5e5d9;
  --wx-warning: #9a5b13;
  --wx-warning-soft: #fff8ec;
  --wx-warning-border: #efd7ad;
  --wx-danger: #b23b4b;
  --wx-danger-hover: #98303f;
  --wx-danger-soft: #fff2f3;
  --wx-danger-border: #edc9ce;
  --wx-ai: #5f55a5;
  --wx-ai-soft: #f5f3fb;
  --wx-ai-border: #dad5ec;

  /* Spacing */
  --wx-space-1: 4px;
  --wx-space-2: 8px;
  --wx-space-3: 12px;
  --wx-space-4: 16px;
  --wx-space-5: 20px;
  --wx-space-6: 24px;
  --wx-space-7: 28px;
  --wx-space-8: 32px;
  --wx-space-10: 40px;
  --wx-space-12: 48px;

  /* Shape, elevation and motion */
  --wx-radius-xs: 6px;
  --wx-radius-sm: 8px;
  --wx-radius-md: 10px;
  --wx-radius-lg: 12px;
  --wx-radius-pill: 999px;
  --wx-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.035),
    0 4px 12px rgba(16, 24, 40, 0.03);
  --wx-shadow-float: 0 18px 48px rgba(16, 24, 40, 0.18);
  --wx-shadow-drawer: -12px 0 36px rgba(16, 24, 40, 0.14);
  --wx-focus: 0 0 0 3px rgba(53, 89, 199, 0.14);
  --wx-duration-fast: 120ms;
  --wx-duration-base: 180ms;
  --wx-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --wx-content-max: 1680px;
  --wx-control-height: 36px;
  --wx-control-height-compact: 32px;
  --wx-row-height: 44px;
  --wx-icon-size: 16px;
  --wx-modal-width: 920px;
  --wx-drawer-width: min(560px, 92vw);

  font-family: var(--wx-font-sans);
  color: var(--wx-text);
  background-color: var(--wx-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /*
   * Bridge the existing application vocabulary to the premium tokens.
   * The legacy design system consumes these names throughout its business
   * modules, so this bridge makes the opt-in skin visible without DOM edits.
   */
  --ui-font: var(--wx-font-sans);
  --ui-page: var(--wx-page);
  --ui-surface: var(--wx-surface);
  --ui-surface-soft: var(--wx-surface-subtle);
  --ui-line: var(--wx-border);
  --ui-line-strong: var(--wx-border-strong);
  --ui-border: var(--wx-border);
  --ui-border-strong: var(--wx-border-strong);
  --ui-ink: var(--wx-ink);
  --ui-text: var(--wx-text);
  --ui-muted: var(--wx-text-muted);
  --ui-faint: var(--wx-text-faint);
  --ui-blue: var(--wx-primary);
  --ui-blue-2: var(--wx-primary-hover);
  --ui-blue-soft: var(--wx-primary-soft);
  --ui-primary: var(--wx-primary);
  --ui-primary-hover: var(--wx-primary-hover);
  --ui-primary-soft: var(--wx-primary-soft);
  --ui-radius-sm: var(--wx-radius-xs);
  --ui-radius: var(--wx-radius-sm);
  --ui-radius-lg: var(--wx-radius-md);
  --ui-shadow-card: var(--wx-shadow-card);
  --ui-shadow-float: var(--wx-shadow-float);
  --ui-focus-ring: var(--wx-focus);
  --blue: var(--wx-primary);
  --navy: var(--wx-brand-950);
}

body.premium-ui *,
[data-ui-skin="premium"] * {
  box-sizing: border-box;
}

body.premium-ui :where(button, input, select, textarea),
[data-ui-skin="premium"] :where(button, input, select, textarea) {
  font: inherit;
}

body.premium-ui :where(strong, b, h1, h2, h3, h4),
[data-ui-skin="premium"] :where(strong, b, h1, h2, h3, h4) {
  color: var(--wx-ink);
}

body.premium-ui :where(.money, .quantity, .metric, [data-numeric]),
[data-ui-skin="premium"] :where(.money, .quantity, .metric, [data-numeric]) {
  font-variant-numeric: tabular-nums lining-nums;
}

body.premium-ui ::selection,
[data-ui-skin="premium"] ::selection {
  color: var(--wx-ink);
  background: #dbeafe;
}

@media (prefers-reduced-motion: reduce) {
  body.premium-ui *,
  [data-ui-skin="premium"] * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}