:root {
  /* Brand — deep ink + teal, enterprise light */
  --ink-950: #07131f;
  --ink-900: #0b1f33;
  --ink-800: #132a42;
  --ink-700: #1e3a55;
  --ink-600: #2d4f6f;
  --ink-500: #4a6b8a;
  --ink-400: #6f8aa5;
  --ink-300: #9bb0c4;
  --ink-200: #c5d3e0;
  --ink-100: #e4ecf3;
  --ink-50: #f3f7fb;

  --teal-700: #0f766e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-100: #ccfbf1;
  --teal-50: #f0fdfa;

  --sky-600: #0284c7;
  --sky-500: #0ea5e9;

  --surface: #f7fafc;
  --surface-elevated: #ffffff;
  --surface-muted: #eef3f8;
  --border: rgba(11, 31, 51, 0.08);
  --border-strong: rgba(11, 31, 51, 0.14);

  --text: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-inverse: #f8fafc;

  --accent: var(--teal-600);
  --accent-strong: var(--teal-700);
  --accent-soft: var(--teal-50);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(7, 19, 31, 0.04), 0 4px 12px rgba(7, 19, 31, 0.03);
  --shadow-md: 0 8px 24px rgba(7, 19, 31, 0.06), 0 2px 6px rgba(7, 19, 31, 0.04);
  --shadow-lg: 0 20px 50px rgba(7, 19, 31, 0.1), 0 4px 12px rgba(7, 19, 31, 0.05);

  /*
   * 中文优先统一字族，避免「英文花体 + 中文黑体」混搭造成的别扭感。
   * 标题/正文同一家族，靠字重与字号建立层级；数字/英文标签用更干净的拉丁体。
   */
  --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
    "Microsoft YaHei", sans-serif;
  --font-latin: "Plus Jakarta Sans", var(--font-sans);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-mono: var(--font-latin);

  --tracking-tight: 0.01em;
  --tracking-cn: 0.04em;
  --tracking-label: 0.12em;

  --container: 1180px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-blur: saturate(1.2) blur(14px);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 112px;

  /* Breakpoint reference (media queries still use px literals) */
  --bp-sm: 640px;
  --bp-md: 920px;
  --bp-lg: 980px;
  --bp-xl: 1100px;

  --focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.35);
}
