:root {
  color-scheme: light;

  --color-canvas: oklch(0.975 0.008 32);
  --color-canvas-deep: oklch(0.94 0.012 32);
  --color-canvas-glow: oklch(0.995 0.005 32);
  --color-surface: oklch(0.995 0.005 32);
  --color-surface-raised: oklch(0.975 0.009 32);
  --color-surface-active: oklch(0.925 0.016 32);
  --color-ink: oklch(0.18 0.025 255);
  --color-ink-secondary: oklch(0.32 0.02 255);
  --color-ink-muted: oklch(0.47 0.018 255);
  --color-rule: oklch(0.84 0.018 255);
  --color-rule-strong: oklch(0.66 0.03 255);
  --color-accent: oklch(0.53 0.215 22);
  --color-accent-ink: oklch(0.985 0.006 255);
  --color-accent-hover: oklch(0.46 0.2 22);
  --color-accent-bright: oklch(0.53 0.215 22);
  --color-accent-soft: oklch(0.94 0.035 18);
  --color-success: oklch(0.42 0.12 155);
  --color-success-soft: oklch(0.94 0.035 155);
  --color-danger: oklch(0.49 0.19 25);
  --color-danger-soft: oklch(0.945 0.035 25);
  --color-focus: oklch(0.42 0.16 22);
  --color-white: oklch(0.995 0.004 255);
  --color-nav-glass: oklch(0.975 0.008 32 / 0.82);
  --color-nav-solid: oklch(0.985 0.007 32 / 0.96);
  --color-map-wash: oklch(0.91 0.035 255 / 0.62);
  --color-map-outline: oklch(0.48 0.08 255 / 0.24);
  --color-map-node: oklch(0.985 0.007 32 / 0.96);
  --color-intelligence-line: oklch(0.5 0.075 255);
  --color-intelligence-line-soft: oklch(0.79 0.035 255 / 0.48);
  --color-intelligence-wash: oklch(0.955 0.018 255);
  --color-intelligence-grid: oklch(0.72 0.025 255 / 0.16);
  --color-overlay: oklch(0.12 0.02 255 / 0.72);

  /* Match the portal's CJK order so customer pages keep the same Chinese rhythm. */
  --font-display: "Source Han Sans CN", "Microsoft YaHei UI", sans-serif;
  --font-body: "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
  --font-label: Bahnschrift, "PingFang SC", "Source Han Sans CN", "Microsoft YaHei", sans-serif;

  /* Customer type scale: annotations 12px, body 14px and above. */
  --type-12: 0.75rem;
  --type-14: 0.875rem;
  --type-16: 1rem;
  --type-18: 1.125rem;
  --type-24: 1.5rem;
  --type-36: 2.25rem;
  --type-56: 3.5rem;

  --text-xs: var(--type-12);
  --text-sm: var(--type-14);
  --text-base: var(--type-16);
  --text-md: var(--type-18);
  --text-lg: var(--type-24);
  --text-xl: var(--type-36);
  --text-2xl: var(--type-36);
  --text-hero: clamp(var(--type-36), 4.6vw, var(--type-56));

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-float: 0 1.75rem 4.5rem oklch(0.18 0.025 255 / 0.14);
  --shadow-accent: 0 0 2.5rem oklch(0.53 0.215 22 / 0.12);
  --shadow-diagram: 0 2.25rem 6rem oklch(0.18 0.025 255 / 0.12);
  --max-page: 90rem;
  --nav-height: 5.25rem;

  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 140ms;
  --duration-standard: 260ms;
  --duration-slow: 620ms;
  --z-nav: 30;
  --z-dialog: 80;
}

@media (max-width: 48rem) {
  :root {
    --nav-height: 4.5rem;
    --text-hero: clamp(var(--type-36), 13vw, var(--type-56));
  }
}