/*
 * GENERATED from server/site-experience-contract.mjs designSystem 2026-08-31.p0-v1.
 * Do not edit this file by hand. Run: npm run sync:design-tokens
 * The Chinese homepage loads this file before legacy and page styles.
 */
:root {
  --ds-color-brand: #073B8E;
  --ds-color-brand-strong: #052A66;
  --ds-color-action: #0B57C4;
  --ds-color-accent: #FF5A00;
  --ds-color-accent-hover: #DF4D00;
  --ds-color-heading: #102542;
  --ds-color-text: #1F2933;
  --ds-color-muted: #617089;
  --ds-color-line: #D8E3F5;
  --ds-color-soft: #F5F8FC;
  --ds-color-surface: #FFFFFF;
  --ds-font-brand: "HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --ds-font-mono: Consolas,"SFMono-Regular",ui-monospace,monospace;
  --ds-line-height-body: 1.65;
  --ds-type-body: 16px;
  --ds-type-secondary: 14px;
  --ds-type-meta: 13px;
  --ds-type-label: 12px;
  --ds-shell-max: 1480px;
  --ds-content-max: 1312px;
  --ds-reading-max: 1180px;
  --ds-page-gutter: 32px;
  --ds-mobile-gutter: 18px;
  --ds-section-space: 96px;
  --ds-mobile-section-space: 64px;
  --ds-space-xxs: 4px;
  --ds-space-xs: 8px;
  --ds-space-sm: 12px;
  --ds-space-md: 16px;
  --ds-space-lg: 24px;
  --ds-space-xl: 32px;
  --ds-space-xxl: 48px;
  --ds-breakpoint-wide: 1320px;
  --ds-breakpoint-navigation: 1080px;
  --ds-breakpoint-tablet: 920px;
  --ds-breakpoint-mobile: 680px;
  --ds-radius-control: 10px;
  --ds-radius-card: 14px;
  --ds-radius-panel: 16px;
  --ds-radius-feature: 20px;
  --ds-radius-pill: 999px;
  --ds-shadow-subtle: 0 2px 8px rgba(16,37,66,.06);
  --ds-shadow-card: 0 18px 48px rgba(5,42,102,.14);
  --ds-shadow-overlay: 0 24px 58px rgba(2,25,64,.24);
  --ds-focus-outline: 2px solid #FF5A00;
  --ds-focus-offset: 3px;
  --ds-control-min-height: 44px;

  /* Compatibility aliases keep existing selectors stable during the controlled rollout. */
  --brand: var(--ds-color-brand);
  --brand2: var(--ds-color-action);
  --orange: var(--ds-color-accent);
  --orange2: #FF7A1A;
  --ink: var(--ds-color-heading);
  --text: var(--ds-color-text);
  --muted: var(--ds-color-muted);
  --line: var(--ds-color-line);
  --soft: var(--ds-color-soft);
  --white: var(--ds-color-surface);
  --max: var(--ds-reading-max);
  --shadow: var(--ds-shadow-subtle);
  --shadow2: var(--ds-shadow-subtle);
  --font-title: var(--ds-font-brand);
  --font-body: var(--ds-font-brand);
  --font-en: var(--ds-font-brand);
  --dss-brand: var(--ds-color-brand);
  --dss-brand-strong: var(--ds-color-brand-strong);
  --dss-brand-link: var(--ds-color-action);
  --dss-accent: var(--ds-color-accent);
  --dss-ink: var(--ds-color-heading);
  --dss-muted: var(--ds-color-muted);
  --dss-line: var(--ds-color-line);
  --dss-surface: var(--ds-color-surface);
  --dss-soft: var(--ds-color-soft);
  --hp-blue: var(--ds-color-brand);
  --hp-blue-deep: var(--ds-color-brand-strong);
  --hp-blue-bright: var(--ds-color-action);
  --hp-orange: var(--ds-color-accent);
  --hp-ink: var(--ds-color-text);
  --hp-muted: var(--ds-color-muted);
  --hp-soft: var(--ds-color-soft);
  --hp-line: var(--ds-color-line);
  --hp-white: var(--ds-color-surface);
  --hp-shadow: var(--ds-shadow-card);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}