/* Primitive → semantic → component tokens. See docs/UI-DESIGN-SYSTEM.md. */
html.ui-modern {
  --ui-gray-950: #16181d;
  --ui-gray-600: #64748b;
  --ui-gray-400: #b7bdc7;
  --ui-gray-200: #e5e7eb;
  --ui-gray-50: #f5f6f8;
  --ui-white: #ffffff;
  --ui-red-600: #bf0c26;
  --ui-red-700: #a30921;
  --ui-red-50: #fff1f3;
  --ui-green-700: #15803d;
  --ui-amber-700: #a16207;
  --ui-space-1: 8px;
  --ui-space-2: 16px;
  --ui-space-3: 24px;
  --ui-space-4: 32px;
  --ui-space-6: 48px;
  --ui-space-8: 64px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-bg: var(--ui-gray-50);
  --ui-surface: var(--ui-white);
  --ui-text: var(--ui-gray-950);
  --ui-muted: var(--ui-gray-600);
  --ui-border: var(--ui-gray-200);
  --ui-accent: var(--ui-red-600);
  --ui-accent-hover: var(--ui-red-700);
  --ui-accent-soft: var(--ui-red-50);
  --ui-success: var(--ui-green-700);
  --ui-warning: var(--ui-amber-700);
  --ui-nav-muted: var(--ui-gray-400);
  --ui-nav-bg: var(--ui-bg);
  --ui-nav-fg: var(--ui-text);
  --ui-nav-icon: var(--ui-muted);
  --ui-nav-hover: var(--ui-surface);
  --ui-nav-gap: 24px;
  --ui-nav-link-padding: 12px;
  --ui-nav-logo-width: 74px;
  --ui-nav-logo-height: 54px;
  --ui-nav-logo-color-break: 68%;
  --ui-mask: rgba(22, 24, 29, .48);
  --ui-shadow: 0 8px 28px rgba(22, 24, 29, .06);
  --ui-shadow-overlay: 0 24px 64px rgba(22, 24, 29, .16);
  --ui-font-body: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --ui-font-display: "Bahnschrift", "Arial", "Microsoft YaHei", sans-serif;
  --ui-duration: 180ms;
  --ui-header-height: 72px;
  --ui-page-gutter: 48px;
  --ui-content-width: 1440px;
  --ui-button-bg: var(--ui-accent);
  --ui-button-fg: var(--ui-surface);
  --ui-button-radius: var(--ui-radius-sm);
  --ui-input-border: var(--ui-border);
  --ui-input-focus: var(--ui-accent);
  --ui-card-bg: var(--ui-surface);
  --ui-card-radius: var(--ui-radius-lg);
  --ui-card-border: var(--ui-border);
  --ui-config-panel-width: 440px;
  --ui-config-inset: 24px;
  --ui-viewer-bg: var(--ui-bg);
  --ui-catalog-gutter-y: clamp(8px, 3dvh, 32px);
  --ui-catalog-gap: clamp(12px, 2dvh, 24px);
  --ui-catalog-copy-padding: clamp(12px, 2dvh, 24px);
  --ui-catalog-title-size: 32px;
  --ui-catalog-product-size: 24px;
  --ui-catalog-header-height: 72px;
  --ui-product-tag-radius: 999px;
  --ui-product-tag-padding-y: 6px;
  --ui-product-tag-dot-size: 6px;
  --ui-product-tag-duration: 2400ms;
  --el-color-primary: var(--ui-accent);
  --el-color-primary-rgb: 191, 12, 38;
  --el-color-primary-dark-2: var(--ui-accent-hover);
  --el-color-primary-light-3: #d75567;
  --el-color-primary-light-5: #e58a97;
  --el-color-primary-light-7: #f0b9c1;
  --el-color-primary-light-8: #f6d0d5;
  --el-color-primary-light-9: var(--ui-accent-soft);
  --el-color-danger: var(--ui-accent);
  --el-color-error: var(--ui-accent);
  --el-color-success: var(--ui-success);
  --el-color-warning: var(--ui-warning);
  --el-color-info: var(--ui-muted);
  --el-text-color-primary: var(--ui-text);
  --el-text-color-regular: var(--ui-text);
  --el-text-color-secondary: var(--ui-muted);
  --el-text-color-placeholder: var(--ui-muted);
  --el-border-color: var(--ui-border);
  --el-border-color-light: var(--ui-border);
  --el-border-color-lighter: var(--ui-border);
  --el-fill-color-blank: var(--ui-surface);
  --el-fill-color-light: var(--ui-bg);
  --el-bg-color: var(--ui-surface);
  --el-font-family: var(--ui-font-body);
  --el-font-size-base: 14px;
  --el-border-radius-base: var(--ui-radius-sm);
  --el-component-size: 48px;
  --el-component-size-large: 48px;
  --el-box-shadow: var(--ui-shadow-overlay);
}
@media (max-width: 1100px) {
  html.ui-modern { --ui-page-gutter: 24px; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  html.ui-modern { --ui-config-panel-width: 400px; }
}
@media (max-width: 767px) {
  html.ui-modern {
    --ui-header-height: 64px;
    --ui-page-gutter: 16px;
    --ui-config-inset: 16px;
    --ui-nav-gap: 8px;
    --ui-nav-link-padding: 8px;
    --ui-nav-logo-width: 62px;
    --ui-nav-logo-height: 46px;
    --ui-catalog-title-size: 24px;
    --ui-catalog-product-size: 18px;
    --ui-catalog-header-height: 64px;
  }
}
@media (max-height: 600px) {
  html.ui-modern {
    --ui-catalog-gutter-y: 8px;
    --ui-catalog-gap: 12px;
    --ui-catalog-copy-padding: 12px;
    --ui-catalog-product-size: 18px;
  }
}
@media (max-width: 767px) and (max-height: 600px) {
  html.ui-modern { --ui-catalog-product-size: 16px; }
}
@media (min-width: 768px) and (max-height: 600px) {
  html.ui-modern { --ui-catalog-header-height: 72px; }
}
@media (max-width: 767px) and (max-height: 520px) {
  html.ui-modern { --ui-catalog-header-height: 64px; }
}