/* tokens.css —— 全站唯一色彩 / 字号 / 间距 / 动效来源。
   本文件是唯一允许出现原始色值的地方；其余 CSS 一律 var() 引用。 */

:root {
  /* ---------- 中性底色 ---------- */
  --site-bg: #F5F7FA;
  --site-surface: #FFFFFF;
  --site-surface-2: #F0F3F7;
  --site-surface-3: #FAFBFD;

  /* ---------- 深色区 ---------- */
  --site-ink-900: #0E1836;
  --site-ink-800: #16245E;
  --site-ink-700: #1C2E70;
  --site-ink-text-1: #F2F5FA;
  --site-ink-text-2: #A8B3CC;
  --site-ink-text-3: #8492B4;
  --site-ink-border: rgba(255, 255, 255, 0.10);
  --site-ink-border-strong: rgba(255, 255, 255, 0.18);
  --site-ink-surface: rgba(255, 255, 255, 0.04);
  --site-ink-surface-2: rgba(255, 255, 255, 0.06);

  /* ---------- 文本 ---------- */
  --site-text-1: #1F2733;
  --site-text-2: #3D4654;
  --site-text-3: #6B7585;
  --site-text-4: #9AA3B2;

  /* ---------- 边框 ---------- */
  --site-border: #E3E8EF;
  --site-border-strong: #CBD3DF;

  /* ---------- 强调色 ---------- */
  --site-accent: #2B5BD7;
  --site-accent-hover: #1E45B8;
  --site-accent-active: #173A9E;
  --site-accent-soft: rgba(43, 91, 215, 0.08);
  --site-accent-soft-2: rgba(43, 91, 215, 0.14);
  --site-accent-soft-3: rgba(43, 91, 215, 0.05);

  /* ---------- 三态：圆点用主色，文字用加深同色系（AA 达标） ---------- */
  --state-pending: #EA4D3B;
  --state-pending-ink: #B4291A;   /* 6.44:1 on white */
  --state-pending-soft: rgba(234, 77, 59, 0.10);
  --state-processing: #2FA36B;
  --state-processing-ink: #1E7A50; /* 5.31:1 on white */
  --state-processing-soft: rgba(47, 163, 107, 0.10);
  --state-settled: #8A93A6;
  --state-settled-ink: #5A6375;    /* 5.98:1 on white */
  --state-settled-soft: rgba(138, 147, 166, 0.12);

  /* ---------- 字体 ---------- */
  --site-font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --site-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---------- 排版 ---------- */
  --site-display-hero: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --site-display-section: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --site-display-sub: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --site-lead: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --site-eyebrow: 13px;
  --site-body-md: 16px;
  --site-body-sm: 14px;
  --site-body-xs: 13px;
  --site-lh-hero: 1.18;
  --site-lh-section: 1.25;
  --site-lh-sub: 1.4;
  --site-lh-lead: 1.65;
  --site-lh-body: 1.7;
  --site-tracking-eyebrow: 0.08em;

  /* ---------- 圆角 ---------- */
  --site-radius-xs: 4px;
  --site-radius-sm: 6px;
  --site-radius-md: 8px;
  --site-radius-lg: 12px;
  --site-radius-xl: 16px;
  --site-radius-pill: 999px;

  /* ---------- 阴影 ---------- */
  --site-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --site-shadow-raised: 0 8px 24px rgba(16, 24, 40, 0.10);
  --site-shadow-mock-light: 0 12px 32px rgba(16, 24, 40, 0.12);
  --site-shadow-mock-dark: 0 24px 64px rgba(0, 0, 0, 0.40);
  --site-shadow-card-dark: 0 18px 44px rgba(0, 0, 0, 0.34);

  /* ---------- 焦点环 ---------- */
  --site-ring-light: 0 0 0 3px rgba(43, 91, 215, 0.32);
  --site-ring-dark: 0 0 0 3px rgba(122, 158, 255, 0.48);

  /* ---------- 动效 ---------- */
  --site-ease: cubic-bezier(0.2, 0, 0, 1);
  --site-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --site-dur-instant: 100ms;
  --site-dur-fast: 150ms;
  --site-dur-base: 200ms;
  --site-dur-slow: 300ms;
  --site-dur-reveal: 240ms;

  /* ---------- 布局 ---------- */
  --site-container-narrow: 800px;
  --site-container-default: 1200px;
  --site-container-wide: 1440px;
  --site-gutter: 24px;
  --site-grid-gap: 24px;
  --site-section-y: 112px;
  --site-stack: 48px;

  /* ---------- 层级 ---------- */
  --site-z-header: 1100;
  --site-z-sticky-cta: 1150;
  --site-z-modal: 1200;
  --site-z-toast: 1300;

  /* ---------- 产品界面复刻（mock）内部 ---------- */
  --mock-side-w: 224px;
  --mock-side-w-narrow: 176px;
  --mock-topbar-h: 40px;
  --mock-topbar-h-mobile: 44px;
  --mock-font-xs: 12px;
  --mock-font-sm: 13px;
  --mock-font-md: 14px;
  --mock-min-w: 880px;
  --mock-grid: rgba(43, 91, 215, 0.05);
}

@media (max-width: 1023px) {
  :root {
    --site-gutter: 20px;
    --site-grid-gap: 20px;
    --site-section-y: 80px;
    --site-stack: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --site-gutter: 16px;
    --site-grid-gap: 16px;
    --site-section-y: 56px;
    --site-stack: 32px;
    --site-body-md: 15px;
  }
}