/* tokens.css — 设计令牌，全站唯一来源。颜色按用途拆分，宽度只留两档。 */

:root {
  /* 底色 */
  --bg: #0B0916;
  --bg-alt: #0E0B1D;
  --bg-foot: #080610;
  --bg-search: #100D20;

  /* 面 */
  --card: #181432;
  --card-hl: #241B45;
  --line: #2E2852;
  --line-hl: #7C5BD6;
  --hairline: #241F3D;
  --rule: #4A4370;

  /* 文字（深底三级） */
  --text: #FFFFFF;
  --text-body: #C9C3E6;
  --text-muted: #9C95C4;
  --text-dim: #8B85AC;

  /* 品牌与强调 */
  --brand: #A78BFA;
  --brand-ink: #C8B8FF;
  --pink: #FF6EC7;
  --pink-ink: #FF8FD5;
  --cyan: #22D3EE;
  --violet: #8450EE;
  --violet-deep: #4B2A8F;

  /* 渐变 */
  --grad-cta: linear-gradient(90deg, #8C5CF5 0%, #FF6EC7 100%);
  --grad-title: linear-gradient(90deg, #FF6EC7 0%, #A68CFA 52%, #21D4ED 100%);
  --grad-cta-card: linear-gradient(90deg, #3D267A 0%, #6B296B 100%);
  --grad-dl-card: linear-gradient(120deg, #2E1F61 0%, #4D2466 100%);

  /* 宽度 */
  --w-container: 1200px;
  --w-prose: 900px;

  /* 圆角 */
  --r-sm: 12px;
  --r-md: 18px;
  --r-card: 24px;
  --r-lg: 28px;
  --r-xl: 32px;
  --r-pill: 100px;

  /* 间距节奏 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --section-y: 88px;
  --page-head-y: 76px;

  /* 字号 */
  --fs-display: 64px;
  --fs-page-title: 46px;
  --fs-cta-title: 42px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-card-title: 20px;
  --fs-app-title: 32px;
  --fs-lead: 17px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-2xs: 12px;

  /* 行高 */
  --lh-display: 1.38;
  --lh-page-title: 1.35;
  --lh-relaxed: 1.7;
  --lh-body: 1.6;

  /* 字体 */
  --font-body: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-display: "ZCOOL QingKe HuangYou", var(--font-body);
  --font-brand: "ZCOOL KuaiLe", var(--font-body);
  --font-num: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --shadow-cta: 0 8px 28px rgba(166, 92, 245, 0.45);
}

/* 移动端整体降档：改这一处，全站生效 */
@media (max-width: 900px) {
  :root {
    --fs-display: 44px;
    --fs-page-title: 34px;
    --fs-cta-title: 30px;
    --fs-h2: 27px;
    --fs-h3: 22px;
    --fs-card-title: 18px;
    --fs-app-title: 26px;
    --fs-lead: 16px;
    --fs-body: 15px;
    --section-y: 60px;
    --page-head-y: 48px;
  }
}

@media (max-width: 560px) {
  :root {
    --fs-display: 34px;
    --fs-page-title: 28px;
    --fs-cta-title: 25px;
    --fs-h2: 23px;
    --fs-h3: 20px;
    --fs-body: 14px;
  }
}