/*
 设计 token。唯一来源是 docs/设计规范.md。
 修改颜色或字号前先改文档，再改这里。
*/

:root {
  /* 色彩 */
  --color-brand: #3178BD;
  --color-brand-dark: #1F5A94;
  --color-brand-light: #E8F1F9;
  --color-ink: #14181D;
  --color-text-secondary: #5A6470;
  --color-line: #E3E7EC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F7FA;
  --color-on-brand: #FFFFFF;
  --color-logo: #5A6470;

  /* 字体 */
  --font-latin: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cjk: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-sans: var(--font-latin), var(--font-cjk);

  /* 字阶 */
  --fs-hero: 64px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-small: 14px;
  /* 法务页面专用。隐私政策与用户协议以可读为主，不承担引导阅读的作用，字号整体收一档 */
  --fs-legal: 15px;
  --fs-legal-h2: 20px;

  /* 行高 */
  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.75;

  /* 间距，8px 基准 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* 栅格 */
  --container: 1280px;
  --gutter: 24px;
  --page-x: 48px;

  /* 形状与动效 */
  --radius: 2px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-line);
  --duration: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* 布局常量 */
  --header-h: 72px;
  --logo-cell-w: 160px;
  --logo-cell-h: 40px;
  --logo-max-w: 132px;
  /* 案例页文字栏宽度。用固定像素而非 ch，ch 随字体变化，同一段代码在不同机器上宽度不同 */
  --measure-case: 770px;
}

@media (max-width: 1199px) {
  :root {
    --page-x: 32px;
    --fs-hero: 52px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-x: 20px;
    --fs-hero: 36px;
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --space-7: 64px;
    --space-8: 80px;
    --header-h: 64px;
    --logo-cell-w: 120px;
    --logo-cell-h: 32px;
    --logo-max-w: 104px;
  }
}